/* ============================================================= Chill Domains - main stylesheet Tokens -> Base -> Layout -> Components -> Sections -> Utilities ============================================================= */ /* ---------- Tokens ---------- */ :root { /* Brand palette: cream + deep slate-ink + tan whippet + warm coral CTA */ --color-ink: #2C3848; --color-ink-2: #3a4a5c; --color-ink-3: #1f2937; --color-cream: #F5EFE4; --color-cream-2: #ECE5D5; --color-cream-3: #FBF7EE; --color-tan: #D4B89A; --color-tan-2: #C3A584; --color-tan-3: #E5D2B8; --color-sage: #8FB39A; --color-sage-2: #739A82; --color-sage-3: #B6CFBC; --color-coral: #E89A75; --color-coral-2: #D68258; --color-coral-3: #F2B696; --color-mist: #E8E3D6; --color-muted: #6F7C8A; --color-line: #DDD6C6; --color-line-2: #E8E2D1; --color-white: #ffffff; --color-success: #5C9B73; --color-danger: #B94A4A; /* Surfaces */ --bg-page: var(--color-cream); --bg-card: #FFFDF8; --bg-dark: var(--color-ink); --text: var(--color-ink); --text-muted: var(--color-muted); --text-on-dark: #E8DDC8; /* Typography */ --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-display: "Fraunces", "Cormorant Garamond", Georgia, "Times New Roman", serif; /* Type scale (fluid) */ --fs-xs: clamp(0.78rem, 0.76rem + 0.1vw, 0.85rem); --fs-sm: clamp(0.88rem, 0.86rem + 0.15vw, 0.95rem); --fs-base: clamp(1rem, 0.97rem + 0.2vw, 1.075rem); --fs-lg: clamp(1.1rem, 1.05rem + 0.3vw, 1.2rem); --fs-xl: clamp(1.25rem, 1.18rem + 0.5vw, 1.45rem); --fs-2xl: clamp(1.55rem, 1.4rem + 0.9vw, 2rem); --fs-3xl: clamp(2rem, 1.7rem + 1.6vw, 2.85rem); --fs-4xl: clamp(2.5rem, 2rem + 2.4vw, 3.75rem); --fs-5xl: clamp(3rem, 2.4rem + 3vw, 4.5rem); /* Spacing scale */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; --space-10: 8rem; /* Layout */ --container: 1240px; /* Was 1180. A touch more breathing room on big monitors without losing the editorial / "boxed" feel. */ --container-narrow: 820px; --gutter: clamp(1rem, 4vw, 2rem); /* Radius */ --radius-sm: 8px; --radius: 16px; --radius-lg: 24px; --radius-pill: 999px; /* Shadows (soft, chill) */ --shadow-sm: 0 1px 2px rgba(44,56,72,0.05), 0 1px 3px rgba(44,56,72,0.04); --shadow: 0 6px 22px rgba(44,56,72,0.09), 0 2px 6px rgba(44,56,72,0.05); --shadow-lg: 0 18px 44px rgba(44,56,72,0.13), 0 6px 14px rgba(44,56,72,0.07); /* Motion */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --t-fast: 140ms; --t-mid: 260ms; --t-slow: 520ms; } /* ---------- Base ---------- */ html { color-scheme: light; overflow-x: clip; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(44,56,72,0.12); } body { overflow-x: clip; font-family: var(--font-sans); font-size: var(--fs-base); color: var(--text); background: var(--bg-page); background-image: radial-gradient(1100px 600px at -10% -10%, rgba(143,179,154,0.16), transparent 60%), radial-gradient(900px 500px at 110% 0%, rgba(232,154,117,0.10), transparent 60%); background-attachment: fixed; /* On most mobile browsers, fixed attachment is expensive; drop it for small screens */ } @media (max-width: 760px) { body { background-attachment: scroll; } } /* Body lock used by mobile nav (preferred over inline overflow:hidden on ) */ body.is-nav-open { overflow: hidden; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.01em; color: var(--color-ink); } h1 { font-size: var(--fs-5xl); line-height: 1.05; letter-spacing: -0.02em; } h2 { font-size: var(--fs-3xl); line-height: 1.1; letter-spacing: -0.015em; } h3 { font-size: var(--fs-xl); font-weight: 600; } h4 { font-size: var(--fs-lg); font-weight: 600; } p { color: var(--text); } p + p { margin-top: var(--space-4); } a { color: var(--color-coral-2); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--t-fast) var(--ease); } a:hover { color: var(--color-coral); } ::selection { background: var(--color-tan); color: var(--color-ink); } :focus-visible { outline: 3px solid var(--color-coral); outline-offset: 3px; border-radius: 4px; } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--color-ink); color: var(--color-cream); padding: var(--space-3) var(--space-4); border-radius: 0 0 var(--radius-sm) 0; z-index: 1000; } .skip-link:focus { left: 0; } /* ---------- Layout ---------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .container--narrow { max-width: var(--container-narrow); } main { display: block; } section { padding-block: clamp(3rem, 6vw, 6rem); } section.section--tight { padding-block: clamp(2rem, 4vw, 3.5rem); } .section__head { text-align: center; max-width: 720px; margin: 0 auto var(--space-8); } .section__head .eyebrow { justify-content: center; } .section__head p { margin-top: var(--space-4); color: var(--text-muted); font-size: var(--fs-lg); } /* ---------- Utilities ---------- */ .eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-sage-2); margin-bottom: var(--space-4); } .eyebrow::before { content: ""; width: 22px; height: 2px; background: currentColor; border-radius: 2px; } .section__head .eyebrow::before { display: none; } .section__head .eyebrow { padding: 6px 14px; background: rgba(143,179,154,0.18); border-radius: var(--radius-pill); } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .muted { color: var(--text-muted); } .text-center { text-align: center; } .lead { font-size: var(--fs-xl); color: var(--text-muted); max-width: 60ch; } .grid { display: grid; gap: var(--space-6); } .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 860px) { .grid--2, .grid--3 { grid-template-columns: 1fr; } } /* ---------- Buttons ---------- */ .btn { --btn-bg: var(--color-coral); --btn-fg: var(--color-ink); --btn-bd: var(--color-coral); display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.85rem 1.35rem; min-height: 44px; font-weight: 600; font-size: var(--fs-sm); line-height: 1; letter-spacing: 0.01em; border-radius: var(--radius-pill); background: var(--btn-bg); color: var(--btn-fg); border: 1.5px solid var(--btn-bd); text-decoration: none; cursor: pointer; transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); white-space: nowrap; touch-action: manipulation; /* avoid 300ms tap delay on older mobile browsers */ } /* Lift on hover — only on devices that genuinely hover (mouse, trackpad). On touch, this "lift" would stick after a tap. */ @media (hover: hover) { .btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); color: var(--btn-fg); } } .btn:active { transform: translateY(0); } .btn--primary { --btn-bg: var(--color-coral); --btn-bd: var(--color-coral); --btn-fg: var(--color-ink); } .btn--primary:hover { --btn-bg: var(--color-coral-2); --btn-bd: var(--color-coral-2); --btn-fg: #fff; } .btn--ink { --btn-bg: var(--color-ink); --btn-bd: var(--color-ink); --btn-fg: var(--color-cream); } .btn--ink:hover { --btn-bg: var(--color-ink-3); --btn-bd: var(--color-ink-3); } .btn--ghost { --btn-bg: transparent; --btn-bd: var(--color-ink); --btn-fg: var(--color-ink); } .btn--ghost:hover { --btn-bg: var(--color-ink); --btn-fg: var(--color-cream); } .btn--ghost-light { --btn-bg: transparent; --btn-bd: rgba(245,239,228,0.4); --btn-fg: var(--color-cream); } .btn--ghost-light:hover { --btn-bg: rgba(245,239,228,0.12); --btn-bd: var(--color-cream); } .btn--lg { padding: 1.05rem 1.7rem; font-size: var(--fs-base); } .btn--sm { padding: 0.6rem 1rem; font-size: var(--fs-xs); } .btn .arrow { display: inline-block; transition: transform var(--t-fast) var(--ease); } @media (hover: hover) { .btn:hover .arrow { transform: translateX(3px); } } /* ---------- Header / Nav ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(245,239,228,0.82); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid transparent; transition: border-color var(--t-mid) var(--ease), background var(--t-mid) var(--ease); } .site-header.is-scrolled { border-bottom-color: var(--color-line); background: rgba(245,239,228,0.95); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); padding-block: 0.85rem; } .brand { display: inline-flex; align-items: center; text-decoration: none; color: var(--color-ink); flex-shrink: 0; } .brand:hover { opacity: 0.85; } .brand__logo { display: block; height: 80px; width: auto; flex-shrink: 0; object-fit: contain; margin-left: -4px; } /* Logo size by tier. Bigger steps would feel jarring during window resize, so each tier is a small step up. */ @media (max-width: 1400px) and (min-width: 1181px) { .brand__logo { height: 72px; } /* small-desktop / laptop */ } @media (max-width: 1180px) { .brand__logo { height: 56px; } /* compact desktop nav tier */ } @media (max-width: 1000px) { .brand__logo { height: 64px; } /* tablet portrait & below */ } @media (max-width: 480px) { .brand__logo { height: 52px; } /* phone */ } .brand--footer .brand__logo--light { height: 132px; } @media (max-width: 920px) { .brand--footer .brand__logo--light { height: 108px; } } @media (max-width: 480px) { .brand--footer .brand__logo--light { height: 80px; } } .primary-nav__list { display: flex; align-items: center; gap: var(--space-2); } .primary-nav a { display: inline-block; padding: 0.6rem 0.9rem; font-size: var(--fs-sm); font-weight: 500; color: var(--color-ink-2); text-decoration: none; border-radius: var(--radius-pill); transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } .primary-nav a:hover { background: var(--color-mist); color: var(--color-ink); } .primary-nav a[aria-current="page"] { color: var(--color-ink); background: var(--color-mist); } .primary-nav__cta a { padding: 0.7rem 1.1rem; } /* Mobile toggle */ .nav-toggle { display: none; width: 44px; height: 44px; border-radius: var(--radius-sm); align-items: center; justify-content: center; flex-direction: column; gap: 5px; } .nav-toggle__bar { width: 22px; height: 2px; background: var(--color-ink); border-radius: 2px; transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease); } .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Tablet-landscape & small-laptop "compact" horizontal nav (1001px-1180px). Keeps the full nav visible (no hamburger) but tightens spacing so it fits on iPad landscape and 13" laptops without wrapping. */ @media (min-width: 1001px) and (max-width: 1180px) { .site-header__inner { gap: var(--space-3); } .primary-nav__list { gap: 0; } .primary-nav a { padding: 0.5rem 0.6rem; font-size: var(--fs-xs); letter-spacing: 0; } .primary-nav__cta a { padding: 0.55rem 0.85rem; } /* Hide the cart badge text on cramped widths — keep the icon-like badge */ #chill-cart-count { padding: 0 .3em; } } @media (max-width: 1000px) { .nav-toggle { display: inline-flex; } /* Closed state: hidden, no layout impact, no animation finicky-ness */ .primary-nav { position: absolute; top: 100%; left: 0; right: 0; background: var(--color-cream); border-bottom: 1px solid var(--color-line); box-shadow: var(--shadow); /* Use clip-path + visibility + opacity for a transition that doesn't depend on computed height (which is fragile inside iframes / sticky containers) */ opacity: 0; visibility: hidden; transform: translateY(-6px); pointer-events: none; transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease), visibility 0s linear var(--t-mid); max-height: calc(100vh - 80px); overflow-y: auto; -webkit-overflow-scrolling: touch; } .primary-nav.is-open { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease), visibility 0s linear 0s; } .primary-nav__list { flex-direction: column; align-items: stretch; padding: var(--space-4); gap: var(--space-1); } .primary-nav a { padding: 0.95rem 1rem; border-radius: var(--radius-sm); font-size: var(--fs-base); /* bump from --fs-sm so menu items are easier to tap */ min-height: 44px; display: flex; align-items: center; } .primary-nav__cta { margin-top: var(--space-3); } .primary-nav__cta a { text-align: center; justify-content: center; min-height: 48px; } } /* ---------- Hero ---------- */ .hero { position: relative; padding-block: clamp(1.25rem, 3vw, 2.5rem) clamp(1rem, 2vw, 2rem); overflow: hidden; } .hero + section { padding-top: clamp(1rem, 2vw, 2rem); } .hero__inner { display: block; } .hero__copy { max-width: 980px; margin-inline: auto; text-align: center; } .hero__title { font-size: clamp(2.4rem, 5.5vw, 4rem); line-height: 1.05; margin-bottom: var(--space-5); font-weight: 500; } .hero__title em { font-style: italic; color: var(--color-coral-2); font-weight: 500; } .hero__sub { font-size: var(--fs-xl); color: var(--text-muted); max-width: 64ch; margin: 0 auto var(--space-6); text-align: left; } .hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; } .hero__meta { justify-content: center; } /* Centered search block at the top of the hero */ .hero__search { text-align: center; margin-bottom: var(--space-7); } .hero__pitch { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 500; line-height: 1.35; color: var(--color-ink); margin: 0 auto var(--space-4); max-width: none; text-wrap: balance; } .hero__search .dsearch { margin-inline: auto; } .hero__search .dsearch__note { max-width: 520px; margin-inline: auto; } .hero__aside { font-style: italic; font-weight: 500; color: var(--color-coral-2); background: rgba(231,111,81,0.08); padding: 1px 6px; border-radius: 4px; } /* Competitor "exhibit" panel — recreates a clipped screenshot */ .exhibit { position: relative; max-width: 560px; margin: var(--space-5) auto var(--space-6); text-align: left; padding: var(--space-5) var(--space-5) var(--space-4); background: #ffffff; border: 1px dashed var(--color-line); border-radius: var(--radius); box-shadow: var(--shadow-sm); transform: rotate(-0.5deg); } .exhibit__tag { position: absolute; top: -12px; left: 18px; background: var(--color-coral); color: var(--color-ink); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--radius-pill); box-shadow: var(--shadow-sm); max-width: calc(100% - 36px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 480px) { .exhibit { padding: var(--space-5) var(--space-4) var(--space-4); } .exhibit__tag { font-size: 10.5px; letter-spacing: 0.04em; } } .exhibit__img { display: block; width: 100%; max-width: 520px; height: auto; margin: 0 auto; padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-line-2); } .exhibit__cap { margin-top: var(--space-3); font-size: var(--fs-sm); color: var(--text-muted); font-style: italic; line-height: 1.45; } .hero__meta { display: flex; gap: var(--space-5); margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--color-line); flex-wrap: wrap; } .hero__meta li { display: flex; align-items: center; gap: 0.55rem; font-size: var(--fs-sm); color: var(--color-ink-2); } .hero__meta svg { width: 18px; height: 18px; color: var(--color-sage-2); } /* Sleeping whippet hero art */ .hero__art { position: relative; aspect-ratio: 1 / 0.85; max-width: 560px; margin-inline: auto; } .hero__art-blob { position: absolute; inset: 4% -4% 4% -4%; border-radius: 44% 56% 50% 50% / 56% 44% 56% 44%; background: linear-gradient(135deg, var(--color-cream-2), var(--color-tan-3)); animation: blob 18s var(--ease) infinite; box-shadow: var(--shadow); } .hero__art-blob.alt { inset: 14% 8% 8% 12%; background: linear-gradient(135deg, var(--color-sage-3), var(--color-cream-3)); opacity: 0.55; animation-delay: -9s; border-radius: 60% 40% 50% 50% / 40% 60% 40% 60%; } .hero__art-whippet { position: absolute; inset: 10% 6% 10% 6%; display: grid; place-items: center; z-index: 2; } .hero__art-whippet-img { width: 88%; height: auto; filter: drop-shadow(0 12px 24px rgba(44, 56, 72, 0.18)); } .hero__art-zzz { position: absolute; top: 12%; right: 18%; display: flex; align-items: flex-end; gap: 4px; font-family: var(--font-display); font-style: italic; color: var(--color-sage-2); pointer-events: none; } .hero__art-zzz span:nth-child(1) { font-size: 22px; opacity: 0.7; } .hero__art-zzz span:nth-child(2) { font-size: 30px; opacity: 0.8; } .hero__art-zzz span:nth-child(3) { font-size: 40px; opacity: 0.85; } .hero__art-zzz span { animation: chillz 3.6s ease-in-out infinite; animation-delay: var(--d); } @keyframes chillz { 0%, 100% { transform: translateY(0); opacity: 0.4; } 50% { transform: translateY(-6px); opacity: 0.95; } } @media (prefers-reduced-motion: reduce) { .hero__art-zzz span { animation: none; } } .hero__art-card { position: absolute; right: -6%; background: var(--bg-card); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: var(--space-3) var(--space-4); display: flex; align-items: center; gap: var(--space-3); font-size: var(--fs-sm); z-index: 3; border: 1px solid var(--color-line-2); min-width: 240px; transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease); } .hero__art-card svg { width: 22px; height: 22px; color: var(--color-sage-2); flex-shrink: 0; } .hero__art-card--1 { top: 6%; } .hero__art-card--2 { top: 50%; transform: translateY(-50%); } .hero__art-card--3 { bottom: 6%; } @media (hover: hover) { .hero__art:hover .hero__art-card--1 { transform: translateX(-6px); } .hero__art:hover .hero__art-card--2 { transform: translateY(-50%) translateX(-10px); } .hero__art:hover .hero__art-card--3 { transform: translateX(-6px); } } @media (max-width: 920px) { .hero__art { aspect-ratio: auto; padding-bottom: var(--space-5); } .hero__art-card { position: static; transform: none; width: 100%; min-width: 0; margin-top: var(--space-3); } .hero__art-card--1 { margin-top: var(--space-5); } .hero__art:hover .hero__art-card--1, .hero__art:hover .hero__art-card--2, .hero__art:hover .hero__art-card--3 { transform: none; } } @keyframes blob { 0%, 100% { border-radius: 44% 56% 50% 50% / 56% 44% 56% 44%; transform: rotate(0deg) scale(1); } 33% { border-radius: 60% 40% 50% 50% / 40% 60% 40% 60%; transform: rotate(4deg) scale(1.02); } 66% { border-radius: 50% 50% 40% 60% / 55% 45% 65% 35%; transform: rotate(-3deg) scale(0.99); } } /* ---------- Trust strip ---------- */ .trust-strip { background: var(--bg-card); border-block: 1px solid var(--color-line); } .trust-strip__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); padding-block: var(--space-5); flex-wrap: wrap; } .trust-strip__label { font-size: var(--fs-xs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; } .trust-strip__logos { display: flex; align-items: center; gap: clamp(1.5rem, 4vw, 3rem); flex-wrap: wrap; } .trust-strip__logo { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: var(--fs-sm); color: var(--color-ink-2); opacity: 0.92; } .trust-strip__logo .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--color-sage); } /* ---------- Feature cards ---------- */ .feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); } @media (max-width: 1020px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .feature-grid { grid-template-columns: 1fr; } } .feature-card { position: relative; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); background: var(--bg-card); border: 1px solid var(--color-line); border-radius: var(--radius-lg); transition: transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease); overflow: hidden; } .feature-card::after { content: ""; position: absolute; inset: auto -40% -40% auto; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(143,179,154,0.18), transparent 70%); opacity: 0; transition: opacity var(--t-mid) var(--ease); pointer-events: none; } @media (hover: hover) { .feature-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--color-tan-3); } .feature-card:hover::after { opacity: 1; } } .feature-card__icon { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: var(--radius); background: var(--color-mist); color: var(--color-sage-2); margin-bottom: var(--space-2); } .feature-card__icon svg { width: 30px; height: 30px; } .feature-card h3 { font-size: var(--fs-xl); } .feature-card p { color: var(--text-muted); } /* ---------- Feature list ---------- */ .feature-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } @media (max-width: 920px) { .feature-list { grid-template-columns: 1fr; } } .feature { display: flex; flex-direction: column; gap: var(--space-3); } .feature__icon { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--color-mist); color: var(--color-sage-2); } .feature__icon svg { width: 26px; height: 26px; } .feature h3 { font-family: var(--font-sans); font-size: var(--fs-lg); font-weight: 600; } .feature p { color: var(--text-muted); font-size: var(--fs-sm); } /* ---------- Partner / dark callout ---------- */ .partner { background: linear-gradient(135deg, var(--color-ink) 0%, var(--color-ink-3) 100%); color: var(--text-on-dark); border-radius: var(--radius-lg); padding: clamp(2rem, 4vw, 3.5rem); position: relative; overflow: hidden; max-width: 880px; margin-inline: auto; } .partner::before { content: ""; position: absolute; inset: -40% -10% auto auto; width: 60%; aspect-ratio: 1; background: radial-gradient(circle, rgba(232,154,117,0.28), transparent 60%); border-radius: 50%; pointer-events: none; } .partner h2 { color: var(--color-cream); } .partner p { color: var(--text-on-dark); opacity: 0.92; max-width: 62ch; } .partner__lead { font-size: var(--fs-xl); line-height: 1.45; opacity: 1 !important; max-width: 56ch !important; padding-left: var(--space-4); border-left: 3px solid var(--color-coral); margin-bottom: var(--space-5); } .partner__lead em { color: var(--color-coral); font-style: italic; font-weight: 500; } .partner__badge { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.9rem; background: rgba(245,239,228,0.10); border: 1px solid rgba(245,239,228,0.18); border-radius: var(--radius-pill); font-size: var(--fs-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-cream); font-weight: 600; margin-bottom: var(--space-4); } .partner__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); } .partner__art { display: grid; place-items: center; } .partner__art-shape { width: 200px; height: 200px; background: rgba(245,239,228,0.06); border: 1px solid rgba(245,239,228,0.18); border-radius: 40% 60% 50% 50% / 55% 45% 55% 45%; display: grid; place-items: center; color: var(--color-tan); } .partner__art-shape svg { width: 130px; height: 130px; } .partner__art-shape img { width: 180px; height: auto; opacity: 0.95; } @media (max-width: 760px) { .partner { grid-template-columns: 1fr; text-align: center; } .partner__actions { justify-content: center; } .partner__art { order: -1; } } /* ---------- Testimonial ---------- */ .testimonial { background: var(--bg-card); border: 1px solid var(--color-line); border-radius: var(--radius-lg); padding: clamp(2rem, 4vw, 3.5rem); max-width: 820px; margin-inline: auto; text-align: center; position: relative; } .testimonial__quote { font-family: var(--font-display); font-size: clamp(1.25rem, 1rem + 1vw, 1.7rem); line-height: 1.4; color: var(--color-ink); font-style: italic; font-weight: 400; } .testimonial__quote::before { content: "\201C"; color: var(--color-tan); font-size: 1.5em; line-height: 0.5; vertical-align: -0.2em; margin-right: 0.05em; } .testimonial__quote::after { content: "\201D"; color: var(--color-tan); font-size: 1.5em; line-height: 0.5; vertical-align: -0.2em; margin-left: 0.05em; } .testimonial__cite { margin-top: var(--space-5); font-size: var(--fs-sm); color: var(--text-muted); } .testimonial__cite strong { color: var(--color-ink); display: block; font-weight: 600; } /* ---------- Pricing ---------- */ .price-hero { background: linear-gradient(180deg, var(--color-cream-3), var(--bg-card) 80%); border: 1px solid var(--color-line); border-radius: var(--radius-lg); padding: clamp(2rem, 5vw, 3.5rem); display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items: center; } @media (max-width: 760px) { .price-hero { grid-template-columns: 1fr; text-align: center; } } .price-hero__pricetag { background: var(--bg-card); border: 1.5px solid var(--color-tan); border-radius: var(--radius-lg); padding: var(--space-7); text-align: center; position: relative; box-shadow: var(--shadow); } .price-hero__pricetag::before { content: "Same price at renewal"; position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--color-sage-2); color: var(--color-cream); padding: 0.3rem 0.9rem; border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; white-space: nowrap; } .price-hero__price { font-family: var(--font-display); font-size: clamp(3rem, 2.4rem + 3vw, 4.2rem); font-weight: 500; color: var(--color-ink); line-height: 1; } .price-hero__price-sub { display: block; font-family: var(--font-sans); font-size: var(--fs-base); color: var(--text-muted); margin-top: var(--space-3); } .price-hero__price-inc { display: inline-block; margin-top: var(--space-3); padding: 0.3rem 0.7rem; background: var(--color-mist); color: var(--color-ink); border-radius: var(--radius-pill); font-size: var(--fs-sm); font-weight: 600; } /* ---------- CTA banner ---------- */ .cta-banner { position: relative; padding-block: clamp(3rem, 6vw, 5rem); } .cta-banner__inner { background: var(--color-ink); color: var(--text-on-dark); border-radius: var(--radius-lg); padding: clamp(2rem, 5vw, 4rem); display: grid; grid-template-columns: 1fr auto; gap: var(--space-6); align-items: center; position: relative; overflow: hidden; box-shadow: var(--shadow-lg); } .cta-banner__inner::before { content: ""; position: absolute; inset: -50% -10% auto auto; width: 70%; aspect-ratio: 1; background: radial-gradient(circle, rgba(232,154,117,0.32), transparent 60%); border-radius: 50%; pointer-events: none; } .cta-banner__title { color: var(--color-cream); font-size: var(--fs-3xl); } .cta-banner__sub { color: rgba(232,221,200,0.85); margin-top: var(--space-3); max-width: 50ch; } .cta-banner__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; position: relative; } .cta-banner .eyebrow { color: var(--color-coral-3); } @media (max-width: 760px) { .cta-banner__inner { grid-template-columns: 1fr; } } /* ---------- Footer ---------- */ .site-footer { background: var(--color-ink); color: var(--text-on-dark); margin-top: var(--space-9); padding-top: var(--space-9); } .site-footer__inner { display: grid; grid-template-columns: 1.5fr 2fr; gap: var(--space-8); } @media (max-width: 920px) { .site-footer__inner { grid-template-columns: 1fr; } } .site-footer__brand .brand { color: var(--color-cream); } .site-footer__brand .brand__name { color: var(--color-cream); } .site-footer__blurb { margin-top: var(--space-4); color: rgba(232,221,200,0.75); max-width: 42ch; } .site-footer__nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } @media (max-width: 640px) { .site-footer__nav { grid-template-columns: 1fr 1fr; } } .site-footer__heading { font-family: var(--font-sans); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.16em; color: rgba(245,239,228,0.65); margin-bottom: var(--space-3); font-weight: 600; } .site-footer__nav ul { display: flex; flex-direction: column; gap: var(--space-2); } .site-footer__nav a { color: rgba(232,221,200,0.85); text-decoration: none; font-size: var(--fs-sm); } .site-footer__nav a:hover { color: var(--color-coral-3); } .site-footer__bottom { margin-top: var(--space-8); border-top: 1px solid rgba(245,239,228,0.10); padding-block: var(--space-5); font-size: var(--fs-xs); color: rgba(232,221,200,0.6); } .site-footer__bottom-inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); } .site-footer__legal { margin-top: var(--space-4); font-size: var(--fs-xs); color: rgba(232,221,200,0.55); max-width: 70ch; } /* ---------- Forms ---------- */ .form { display: grid; gap: var(--space-4); min-width: 0; } .form__row { display: grid; gap: var(--space-4); grid-template-columns: 1fr 1fr; min-width: 0; } /* Grid items default to min-width:auto which is min-content — that lets an 's default sizing push the row wider than the viewport on very narrow phones. min-width:0 lets them shrink properly. The same fix is needed on every grid container that wraps forms or text-heavy content. */ .form__row > * { min-width: 0; } .field { min-width: 0; } .split > * { min-width: 0; } .feature-grid > *, .feature-list > *, .steps > *, .tld-grid > *, .promise > *, .grid > * { min-width: 0; } @media (max-width: 640px) { .form__row { grid-template-columns: 1fr; } } .field label { display: block; font-size: var(--fs-sm); font-weight: 600; margin-bottom: 0.4rem; color: var(--color-ink-2); } .field input, .field textarea, .field select { width: 100%; padding: 0.85rem 1rem; background: var(--bg-card); border: 1.5px solid var(--color-line); border-radius: var(--radius); font-size: max(16px, var(--fs-base)); /* >=16px prevents iOS zoom on focus */ color: var(--color-ink); transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); -webkit-appearance: none; appearance: none; min-height: 44px; } .field select { background-image: linear-gradient(45deg, transparent 50%, var(--color-ink-2) 50%), linear-gradient(135deg, var(--color-ink-2) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 2.5rem; } .field textarea { min-height: 160px; resize: vertical; } .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--color-sage-2); box-shadow: 0 0 0 4px rgba(143,179,154,0.22); } .field--check { display: flex; gap: 0.6rem; align-items: flex-start; font-size: var(--fs-sm); color: var(--color-ink-2); } .field--check input { width: 18px; height: 18px; margin-top: 0.18rem; } .honey { position: absolute !important; left: -9999px !important; top: -9999px !important; } .form__hint { font-size: var(--fs-xs); color: var(--text-muted); } /* ============================================================= ---------- INPUT LIST (foolproof multi-entry pattern) ---------- Replaces "one per line" textareas with a labelled, validated row per entry plus Add / Remove buttons. Used by nameservers and glue record IPs. The data-input-list attribute opts the container in; main.js attaches the behaviour. ============================================================= */ .input-list { display: grid; gap: var(--space-2); } .input-list__row { display: grid; grid-template-columns: minmax(28px, auto) 1fr auto; gap: var(--space-2); align-items: center; } .input-list__num { font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 500; color: var(--text-muted); text-align: right; padding-right: 2px; user-select: none; } .input-list__field { position: relative; min-width: 0; } .input-list__input { width: 100%; padding: 0.7rem 0.9rem; background: var(--bg-card); border: 1.5px solid var(--color-line); border-radius: var(--radius); font-size: max(16px, var(--fs-base)); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--color-ink); min-height: 44px; -webkit-appearance: none; appearance: none; transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); } .input-list__input:focus { outline: none; border-color: var(--color-sage-2); box-shadow: 0 0 0 4px rgba(143,179,154,0.22); } .input-list__row[data-invalid="true"] .input-list__input { border-color: var(--color-danger); box-shadow: 0 0 0 4px rgba(185,74,74,0.14); } .input-list__row[data-valid="true"] .input-list__input { border-color: var(--color-sage); } .input-list__error { display: none; font-size: var(--fs-xs); color: var(--color-danger); margin-top: 0.25rem; } .input-list__row[data-invalid="true"] .input-list__error { display: block; } .input-list__remove { background: transparent; border: 1.5px solid var(--color-line); color: var(--text-muted); width: 44px; height: 44px; border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.2rem; line-height: 1; transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); } .input-list__remove:hover { border-color: var(--color-danger); color: var(--color-danger); } .input-list__remove:disabled { opacity: 0.35; cursor: not-allowed; } .input-list__add { margin-top: var(--space-2); background: transparent; border: 1.5px dashed var(--color-line); color: var(--color-ink-2); padding: 0.65rem 1rem; border-radius: var(--radius); font-weight: 600; font-size: var(--fs-sm); cursor: pointer; min-height: 44px; transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); align-self: start; justify-self: start; } .input-list__add:hover { border-color: var(--color-sage-2); color: var(--color-sage-2); background: rgba(143,179,154,0.06); } .input-list__add:disabled { opacity: 0.5; cursor: not-allowed; } .input-list__caption { font-size: var(--fs-xs); color: var(--text-muted); margin-top: var(--space-2); } .input-list__caption .ok { color: var(--color-success); font-weight: 600; } .input-list__caption .warn { color: var(--color-danger); font-weight: 600; } @media (max-width: 480px) { .input-list__row { grid-template-columns: auto 1fr auto; } } /* ---------- Tables ---------- */ .table-wrap { /* Wrap any .table that might be too wide for narrow viewports — gives horizontal scroll within the table only (not the page). */ width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius); } .table { width: 100%; background: var(--bg-card); border: 1px solid var(--color-line); border-radius: var(--radius); overflow: hidden; } .table th, .table td { padding: var(--space-4) var(--space-5); text-align: left; border-bottom: 1px solid var(--color-line); font-size: var(--fs-sm); } .table tr:last-child td { border-bottom: 0; } .table th { background: var(--color-mist); font-weight: 600; color: var(--color-ink); } .table .col-price { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-lg); color: var(--color-ink); } @media (max-width: 560px) { .table th, .table td { padding: var(--space-3); } } /* ---------- Process steps ---------- */ .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); counter-reset: step; } @media (max-width: 920px) { .steps { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .steps { grid-template-columns: 1fr; } } .step { background: var(--bg-card); border: 1px solid var(--color-line); border-radius: var(--radius); padding: var(--space-5); position: relative; } .step::before { counter-increment: step; content: "0" counter(step); font-family: var(--font-display); font-size: 1.1rem; color: var(--color-sage-2); font-weight: 600; display: inline-block; padding: 0.2rem 0.6rem; background: rgba(143,179,154,0.16); border-radius: var(--radius-pill); margin-bottom: var(--space-3); } .step h3 { font-family: var(--font-sans); font-size: var(--fs-lg); font-weight: 600; margin-bottom: var(--space-2); } .step p { font-size: var(--fs-sm); color: var(--text-muted); } /* ---------- FAQ ---------- */ .faq { display: grid; gap: var(--space-3); max-width: 820px; margin-inline: auto; } .faq details { background: var(--bg-card); border: 1px solid var(--color-line); border-radius: var(--radius); overflow: hidden; transition: box-shadow var(--t-fast) var(--ease); } .faq details[open] { box-shadow: var(--shadow); } .faq summary { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); cursor: pointer; font-weight: 500; font-family: var(--font-display); font-size: var(--fs-lg); list-style: none; color: var(--color-ink); } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; font-size: 1.5rem; color: var(--color-coral-2); font-weight: 400; transition: transform var(--t-fast) var(--ease); } .faq details[open] summary::after { transform: rotate(45deg); } .faq .faq__body { padding: 0 var(--space-5) var(--space-5); color: var(--color-ink-2); } /* ---------- Page header (sub-pages) ---------- */ .page-header { position: relative; padding-block: clamp(3rem, 6vw, 5rem) clamp(2rem, 4vw, 3.5rem); background: radial-gradient(800px 400px at 90% -20%, rgba(232,154,117,0.16), transparent 60%), linear-gradient(180deg, var(--color-mist), transparent 80%); border-bottom: 1px solid var(--color-line); } .page-header__inner { max-width: 760px; } .page-header h1 { margin-bottom: var(--space-4); } .page-header p { color: var(--text-muted); font-size: var(--fs-xl); } /* ---------- Breadcrumb ---------- */ .crumb { font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: var(--space-4); } .crumb a { color: var(--text-muted); text-decoration: none; } .crumb a:hover { color: var(--color-coral-2); } .crumb span { color: var(--color-ink); } /* ---------- Split layout ---------- */ .split { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; } @media (max-width: 920px) { .split { grid-template-columns: 1fr; } } .split--narrow { max-width: 980px; margin-inline: auto; } .checklist { display: grid; gap: var(--space-3); } .checklist li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: var(--fs-base); color: var(--color-ink-2); } .checklist svg { width: 22px; height: 22px; color: var(--color-sage-2); margin-top: 3px; flex-shrink: 0; } .aside-card { background: var(--bg-card); border: 1px solid var(--color-line); border-radius: var(--radius-lg); padding: clamp(1.75rem, 3vw, 2.25rem); position: sticky; top: 100px; display: grid; gap: var(--space-4); } .aside-card__price { font-family: var(--font-display); font-size: var(--fs-2xl); color: var(--color-ink); font-weight: 500; } .aside-card .btn { width: 100%; justify-content: center; } .aside-card__note { font-size: var(--fs-xs); color: var(--text-muted); } /* ---------- Article ---------- */ .prose { max-width: 70ch; } .prose p, .prose ul, .prose ol { font-size: var(--fs-base); color: var(--color-ink-2); margin-bottom: var(--space-4); } .prose ul, .prose ol { padding-left: 1.4rem; } .prose ul { list-style: disc; } .prose ol { list-style: decimal; } .prose h2 { font-size: var(--fs-2xl); margin-top: var(--space-7); margin-bottom: var(--space-4); } .prose h3 { font-size: var(--fs-xl); margin-top: var(--space-5); margin-bottom: var(--space-3); } /* ---------- Coming soon / centered card ---------- */ .coming-soon { text-align: center; max-width: 620px; margin-inline: auto; padding: clamp(2rem, 5vw, 4rem); background: var(--bg-card); border: 1px solid var(--color-line); border-radius: var(--radius-lg); } .coming-soon__icon { display: inline-grid; place-items: center; width: 72px; height: 72px; background: var(--color-mist); color: var(--color-sage-2); border-radius: var(--radius-lg); margin-bottom: var(--space-4); } .coming-soon__icon svg { width: 40px; height: 40px; } /* ---------- 404 ---------- */ .notfound { display: grid; place-items: center; text-align: center; padding-block: clamp(4rem, 8vw, 7rem); } .notfound__code { font-family: var(--font-display); font-size: clamp(5rem, 4rem + 5vw, 9rem); font-weight: 500; line-height: 1; color: var(--color-ink); letter-spacing: -0.02em; } .notfound__actions { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; margin-top: var(--space-5); } /* ---------- Reveal on scroll ---------- */ [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); } [data-reveal].is-visible { opacity: 1; transform: none; } [data-reveal][data-reveal-delay="1"] { transition-delay: 80ms; } [data-reveal][data-reveal-delay="2"] { transition-delay: 160ms; } [data-reveal][data-reveal-delay="3"] { transition-delay: 240ms; } [data-reveal][data-reveal-delay="4"] { transition-delay: 320ms; } @media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } } /* ============================================================= ---------- REDUCED MOTION: comprehensive ---------- The hero blob morphs, the sleeping-Zs float, the search result spinner spins, the result card slides in. When the user has asked their OS for "Reduce motion" (System Settings → Accessibility), turn all of that off. ============================================================= */ @media (prefers-reduced-motion: reduce) { /* Ambient hero animations */ .hero__art-blob, .hero__art-blob.alt { animation: none !important; } .hero__art-zzz span { animation: none !important; } /* Domain search: loading spinner & result card entrance */ .dsearch__result { animation: none !important; } .dsearch__result[data-tone="loading"] .dsearch__result-headline::after { animation: none !important; } /* Disable hover lift/scale transforms entirely */ .btn, .feature-card, .tld-card, .hero__art-card { transition: none !important; } .btn:hover, .feature-card:hover, .tld-card:hover, .hero__art:hover .hero__art-card { transform: none !important; } } /* ---------- Tag pills ---------- */ .tags { display: flex; flex-wrap: wrap; gap: 0.4rem; } .tag { padding: 0.3rem 0.65rem; background: var(--color-mist); color: var(--color-ink); font-size: var(--fs-xs); font-weight: 600; border-radius: var(--radius-pill); } .tag--coral { background: rgba(232,154,117,0.16); color: var(--color-coral-2); } .tag--sage { background: rgba(143,179,154,0.18); color: var(--color-sage-2); } /* ---------- Status / alerts ---------- */ .alert { padding: var(--space-4) var(--space-5); border-radius: var(--radius); border: 1px solid var(--color-line); background: var(--bg-card); font-size: var(--fs-sm); } .alert--success { border-color: var(--color-success); background: var(--color-mist); color: var(--color-ink); } /* ---------- Callout (unified status component) ---------- One component for every "the system is telling you something" moment — form errors, premium notes, inline findings. Variants: --ok, --warn, --info, --danger. Replaces the per-page .alert inline styles and matches the toolbox's left-accent pattern. */ .callout { padding: var(--space-3) var(--space-4); border: 1px solid var(--color-line); border-left: 4px solid var(--color-tan-2); border-radius: var(--radius); background: var(--bg-card); font-size: var(--fs-sm); line-height: 1.55; } .callout--ok { border-left-color: var(--color-sage-2); background: #F4F8F1; } .callout--warn { border-left-color: var(--color-coral-2); background: #FCEFE5; } .callout--info { border-left-color: var(--color-tan-2); background: #FBF3E5; } .callout--danger { border-left-color: var(--color-danger); background: #FBEEEE; color: var(--color-danger); } /* ---------- Button busy state ---------- Buttons get aria-busy="true" while a request is in flight; a small spinner so slow networks don't look frozen. */ .btn[aria-busy="true"] { position: relative; opacity: 0.75; pointer-events: none; } .btn[aria-busy="true"]::after { content: ""; display: inline-block; width: 0.85em; height: 0.85em; margin-left: 0.5em; vertical-align: -0.1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: btn-spin 0.7s linear infinite; } @keyframes btn-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .btn[aria-busy="true"]::after { animation: none; border-right-color: currentColor; opacity: 0.4; } } /* ---------- Search-result suggestion chips ---------- Shown inline under the hero search when a name is taken: sibling extensions that ARE available, each with price + register/add actions. */ .dsearch__suggestions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); } .dsearch__suggestion { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--color-line); border-radius: 10px; background: var(--bg-card); min-width: 200px; flex: 1 1 200px; max-width: 280px; } .dsearch__suggestion-name { margin: 0; font-weight: 700; word-break: break-all; } .dsearch__suggestion-price { margin: 0; font-size: var(--fs-xs); color: var(--text-muted); } .dsearch__suggestion-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; } /* ---------- FAQ filter ---------- */ .faq-filter { max-width: 820px; margin-inline: auto; margin-bottom: var(--space-7); } .faq-filter input { width: 100%; padding: 0.75em 1em; border: 1px solid var(--color-line); border-radius: var(--radius); background: var(--bg-card); font: inherit; color: var(--color-ink); } .faq-filter input:focus { outline: 3px solid var(--color-coral); outline-offset: 1px; } .faq-filter__count { margin: var(--space-2) 0 0; font-size: var(--fs-sm); color: var(--text-muted); min-height: 1.4em; } /* ---------- Misc ---------- */ hr.rule { border: 0; border-top: 1px solid var(--color-line); margin-block: var(--space-7); } /* ---------- Calculator (pricing) ---------- */ .calc { background: var(--bg-card); border: 1px solid var(--color-line); border-radius: var(--radius-lg); padding: clamp(1.75rem, 3vw, 2.5rem); display: grid; gap: var(--space-5); } .calc__row { display: grid; grid-template-columns: 1fr auto; gap: var(--space-4); align-items: center; } @media (max-width: 540px) { .calc__row { grid-template-columns: 1fr; gap: var(--space-2); } } .calc__label { font-size: var(--fs-base); font-weight: 600; color: var(--color-ink); } .calc select, .calc input[type="number"] { width: 200px; padding: 0.65rem 0.85rem; border: 1.5px solid var(--color-line); border-radius: var(--radius); font-size: max(16px, var(--fs-base)); /* >=16px to avoid iOS zoom */ font-family: var(--font-sans); background: var(--bg-card); min-height: 44px; -webkit-appearance: none; appearance: none; } .calc input[type="number"] { width: 110px; text-align: center; font-family: var(--font-display); font-weight: 500; font-size: max(16px, var(--fs-lg)); } @media (max-width: 540px) { .calc select, .calc input[type="number"] { width: 100%; } } .calc input[type="number"]:focus, .calc select:focus { outline: none; border-color: var(--color-sage-2); box-shadow: 0 0 0 4px rgba(143,179,154,0.22); } .calc__totals { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); padding-top: var(--space-5); border-top: 1px solid var(--color-line); } @media (max-width: 540px) { .calc__totals { grid-template-columns: 1fr; } } .calc__total { background: var(--color-mist); border-radius: var(--radius); padding: var(--space-4) var(--space-5); } .calc__total--feature { background: var(--color-ink); color: var(--color-cream); } .calc__total span { display: block; font-size: var(--fs-xs); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; opacity: 0.7; margin-bottom: 0.25rem; } .calc__total strong { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 500; color: inherit; } .calc__total--feature strong { color: var(--color-coral-3); } /* ---------- Domain search bar (chill) ---------- */ .dsearch { display: flex; gap: var(--space-3); background: var(--bg-card); border: 1.5px solid var(--color-line); border-radius: var(--radius-pill); padding: 6px; box-shadow: var(--shadow); max-width: 520px; margin-bottom: var(--space-5); } .dsearch input { flex: 1; min-width: 0; /* allow flex item to shrink below intrinsic min-content */ padding: 0.85rem 1rem; background: transparent; border: 0; font-size: max(16px, var(--fs-base)); /* >=16px to avoid iOS zoom */ color: var(--color-ink); outline: none; -webkit-appearance: none; appearance: none; } .dsearch input::placeholder { color: var(--text-muted); } .dsearch .btn { padding: 0.85rem 1.25rem; min-height: 44px; } .dsearch__note { font-size: var(--fs-xs); color: var(--text-muted); margin-top: var(--space-2); } @media (max-width: 480px) { .dsearch { flex-direction: column; border-radius: var(--radius-lg); padding: var(--space-3); gap: var(--space-2); } .dsearch .btn { width: 100%; justify-content: center; border-radius: var(--radius-pill); } .dsearch input { padding: 0.65rem 0.75rem; } } /* Live availability result card */ .dsearch__result { margin-top: var(--space-4); background: var(--bg-card); border: 1px solid var(--color-line); border-radius: var(--radius); padding: var(--space-4) var(--space-5); box-shadow: var(--shadow-sm); max-width: 520px; animation: dresult-in var(--t-mid) var(--ease); } .dsearch__result-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; } .dsearch__result-text { flex: 1; min-width: 220px; } .dsearch__result-headline { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 500; color: var(--color-ink); margin: 0; } .dsearch__result-body { font-size: var(--fs-sm); color: var(--text-muted); margin-top: var(--space-1); } .dsearch__result-body code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--color-mist); padding: 1px 6px; border-radius: 4px; font-size: 0.92em; color: var(--color-ink); } .dsearch__result-cta { flex-shrink: 0; } .dsearch__result[data-tone="ok"] { border-color: var(--color-sage); background: linear-gradient(180deg, rgba(143,179,154,0.10), var(--bg-card)); } .dsearch__result[data-tone="taken"] { border-color: var(--color-tan); background: linear-gradient(180deg, rgba(212,184,154,0.14), var(--bg-card)); } .dsearch__result[data-tone="warn"] { border-color: var(--color-coral); background: linear-gradient(180deg, rgba(232,154,117,0.10), var(--bg-card)); } .dsearch__result[data-tone="info"], .dsearch__result[data-tone="loading"] { border-color: var(--color-line); } .dsearch__result[data-tone="loading"] .dsearch__result-headline::after { content: ""; display: inline-block; width: 12px; height: 12px; margin-left: 8px; border: 2px solid var(--color-sage-3); border-top-color: var(--color-sage-2); border-radius: 50%; vertical-align: -2px; animation: dspin 0.8s linear infinite; } @keyframes dspin { to { transform: rotate(360deg); } } @keyframes dresult-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } /* ---------- Promise / no-darkpatterns list ---------- */ .promise { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); } @media (max-width: 720px) { .promise { grid-template-columns: 1fr; } } .promise__item { background: var(--bg-card); border: 1px solid var(--color-line); border-radius: var(--radius); padding: var(--space-5); display: flex; gap: var(--space-3); align-items: flex-start; } .promise__item svg { width: 28px; height: 28px; color: var(--color-sage-2); flex-shrink: 0; } .promise__item h3 { font-family: var(--font-sans); font-size: var(--fs-base); font-weight: 600; margin-bottom: 4px; color: var(--color-ink); } .promise__item p { font-size: var(--fs-sm); color: var(--text-muted); } /* TLD price grid */ .tld-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-4); } .tld-card { display: block; background: var(--bg-card); border: 1px solid var(--color-line); border-radius: var(--radius); padding: var(--space-5); text-align: center; text-decoration: none; color: inherit; transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); } a.tld-card:focus-visible { outline: 3px solid var(--color-coral); outline-offset: 2px; } @media (hover: hover) { .tld-card:hover { transform: translateY(-2px); border-color: var(--color-tan); box-shadow: var(--shadow); } } .tld-card__ext { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 500; color: var(--color-ink); } .tld-card__price { margin-top: var(--space-2); font-weight: 600; color: var(--color-sage-2); } .tld-card__price-sub { display: block; margin-top: var(--space-1); font-size: var(--fs-xs); color: var(--text-muted); font-weight: 500; } .tld-card--popular { border-color: var(--color-tan); position: relative; } .tld-card--popular::after { content: "Popular"; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: var(--color-tan); color: var(--color-ink); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.2rem 0.6rem; border-radius: var(--radius-pill); } /* ============================================================= ---------- MOBILE IMPROVEMENTS (≤920px / ≤560px / ≤480px) ---- Targeted tweaks for phone-sized viewports. Append-only so the desktop design is untouched. ============================================================= */ /* Make any image/svg/iframe scale and never overflow the viewport */ img, svg, video, iframe { max-width: 100%; height: auto; } /* Long words / URLs shouldn't push the layout */ .prose, .field, .alert, .testimonial, .faq__body, .crumb, .checklist li, .promise__item, .step, .dsearch__result, .feature p, .feature-card p, .site-footer__nav a, .site-footer__legal, .site-footer__blurb { word-wrap: break-word; overflow-wrap: anywhere; } /* iPhone SE / very-narrow Android (≤360px): an extra tightening pass. Default mobile rules already cover most of it; this just gives a touch more breathing room on the smallest screens. */ @media (max-width: 360px) { :root { --gutter: 0.75rem; } .hero__title { font-size: clamp(1.85rem, 9vw, 2.4rem); } .hero__pitch { font-size: var(--fs-base); } .btn { padding: 0.75rem 1.05rem; font-size: var(--fs-xs); } .btn--lg { padding: 0.9rem 1.3rem; font-size: var(--fs-sm); } .field input, .field textarea, .field select { padding: 0.7rem 0.85rem; } /* Container negotiates with the very-narrow gutter so content gets max room */ .container { padding-inline: var(--gutter); } } /* Inline code shouldn't blow out columns */ code { word-break: break-word; } @media (max-width: 920px) { /* Make sections breathe less on phones */ section { padding-block: clamp(2.25rem, 8vw, 4rem); } .page-header { padding-block: clamp(2.25rem, 7vw, 4rem) clamp(1.5rem, 5vw, 3rem); } .page-header p { font-size: var(--fs-lg); } /* The sticky pricing aside-card just blocks the screen on mobile — un-stick it */ .aside-card { position: static; top: auto; } /* Footer typography a little tighter */ .site-footer { margin-top: var(--space-7); padding-top: var(--space-7); } .site-footer__nav a { padding-block: 0.25rem; display: inline-block; min-height: 32px; } .site-footer__legal { font-size: var(--fs-xs); } } @media (max-width: 640px) { /* The hero subline was set to text-align:left, which reads oddly when the copy is centered. Re-center it on phones. */ .hero__sub { text-align: center; } .hero__title { font-size: clamp(2rem, 8vw, 2.6rem); } .hero__actions .btn { flex: 1 1 100%; } .hero__meta { gap: var(--space-3); margin-top: var(--space-5); padding-top: var(--space-4); } /* CTA banner buttons should fill */ .cta-banner__actions { width: 100%; } .cta-banner__actions .btn { flex: 1 1 100%; } /* Partner callout actions */ .partner__actions .btn { flex: 1 1 100%; } /* Notfound page actions */ .notfound__actions { width: 100%; } .notfound__actions .btn { flex: 1 1 100%; } } @media (max-width: 480px) { /* Header inner padding can be a touch tighter to leave room for the hamburger */ .site-header__inner { gap: var(--space-3); padding-block: 0.55rem; } /* Container gutter is already fluid; this just keeps very narrow phones readable */ :root { --gutter: 1rem; } /* Eyebrow labels — bump from xs (~12.5px) to a hair more for a11y */ .eyebrow { font-size: 0.78rem; } /* FAQ summary text was --fs-lg italic display face — at narrow widths the right-side "+" can crowd it. Slightly tighter padding helps. */ .faq summary { padding: var(--space-3) var(--space-4); font-size: var(--fs-base); } .faq .faq__body { padding: 0 var(--space-4) var(--space-4); } /* Process steps look tidier with smaller padding on narrow phones */ .step { padding: var(--space-4); } /* Calculator totals — keep them readable, just a bit tighter */ .calc__total { padding: var(--space-3) var(--space-4); } /* Site footer columns: 2-col already at <=640px; at very narrow it just stacks */ .site-footer__nav { grid-template-columns: 1fr; gap: var(--space-5); } /* Footer bottom should stack the two paragraphs */ .site-footer__bottom-inner { flex-direction: column; align-items: flex-start; } /* Pricing tag-style "Same price at renewal" can overflow narrow screens */ .price-hero__pricetag::before { font-size: 0.62rem; padding: 0.25rem 0.7rem; } /* Live availability result actions: stack to full width */ .dsearch__result-inner { flex-direction: column; align-items: stretch; } .dsearch__result-cta { width: 100%; } .dsearch__result-cta .btn { width: 100%; } /* TLD grid — the auto-fill minmax(180px) gives a single column on phones, keep cards a bit shorter */ .tld-card { padding: var(--space-4); } } /* Improve cart badge contrast on small screens */ #chill-cart-count { font-weight: 600; line-height: 1.5; } /* When the mobile nav is open, keep the toggle accessible above the menu */ .nav-toggle { z-index: 60; position: relative; } /* ============================================================= ---------- TABLET PORTRAIT TIER (761px–1024px) ---------- Catches iPad mini / iPad 10.2" / iPad Air / iPad Pro 12.9" all held in portrait. Most of these widths already inherit the ≤920px mobile rules above; this block extends a few of those improvements upward so iPad Pro 12.9" portrait (1024px) gets the same touch-friendly polish. ============================================================= */ @media (min-width: 761px) and (max-width: 1024px) { /* iOS Safari renders fixed-attachment background gradients expensively and they can break on rotation; keep them scrolling at tablet sizes too. */ body { background-attachment: scroll; } /* iPad Pro 12.9" portrait (1024) was the only width above 920 still getting the desktop sticky aside; lift it out for tablet portrait too. */ .aside-card { position: static; top: auto; } /* Slightly tighter section rhythm than desktop, but more generous than phone. The clamp keeps it fluid. */ section { padding-block: clamp(2.75rem, 6vw, 5rem); } /* Touch-device defaults: kill any tiny tap targets, give buttons comfortable padding */ .btn { min-height: 48px; } .btn--sm { min-height: 40px; padding: 0.7rem 1.1rem; font-size: var(--fs-sm); } .field input, .field textarea, .field select { min-height: 48px; } /* Footer is currently 1.5fr 2fr at >920 — at iPad Pro 12.9 portrait (1024) that fits, but on the iPad 10.2/Air widths (768–834) it stacks. Either way looks fine; this just keeps the inner padding consistent. */ .site-footer { margin-top: var(--space-8); padding-top: var(--space-8); } /* Hero copy: cap the hero title a bit so it doesn't dominate the screen on tablet portrait the way it does on a 1440px desktop */ .hero__title { font-size: clamp(2.25rem, 5.5vw, 3rem); } .hero__sub { font-size: var(--fs-lg); } /* Live availability result card — give it the full container width on tablet so its CTA is easier to reach */ .dsearch__result, .dsearch { max-width: 620px; } /* Page-header is more compressed on tablet */ .page-header { padding-block: clamp(2.5rem, 6vw, 4rem) clamp(1.75rem, 4vw, 3rem); } .page-header p { font-size: var(--fs-lg); } /* TLD grid uses auto-fill minmax(180px,1fr) — at 768 it lays out 3 cards, at 834 it can fit 4. That mostly works; just tighten card padding a touch so the labels aren't lost in whitespace. */ .tld-card { padding: var(--space-4) var(--space-3); } /* Hero art floating cards stay absolutely-positioned at >920, which means iPad Pro 12.9" portrait (1024) still shows them floating. They're fine, but ensure they don't escape the viewport on the right edge. */ .hero__art-card { right: 0; min-width: 200px; } } /* iPad-portrait specific: iPad Pro 12.9 portrait (1024) was getting a 3-col feature-grid that's tight; let it drop to 2 cols at this exact tablet-portrait range so each card has breathing room. */ @media (min-width: 921px) and (max-width: 1024px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } .steps { grid-template-columns: repeat(2, 1fr); } /* 4 → 2 cols on tablet portrait */ /* Pricing aside / checkout summary: collapse to single column on tablet portrait so forms get full width and the order summary sits below */ .split { grid-template-columns: 1fr; } } /* ============================================================= ---------- LARGE DESKTOP TIER (≥1440px / ≥1800px) ---------- The original design is intentionally boxed (--container was 1180, now 1240). On big monitors that produces a lot of dead space and the hero typography starts feeling undersized. Subtle bumps here. ============================================================= */ @media (min-width: 1440px) { /* Hero typography scales a touch larger at desktop widths */ .hero__title { font-size: clamp(3rem, 4.2vw, 4.5rem); } .hero__sub { font-size: clamp(1.15rem, 1.3vw, 1.4rem); max-width: 68ch; } .hero__pitch { font-size: clamp(1.25rem, 1.4vw, 1.55rem); } /* Sections breathe a little more */ section { padding-block: clamp(4rem, 5vw, 7rem); } .hero { padding-block: clamp(2rem, 3vw, 3.5rem) clamp(1.5rem, 2.5vw, 3rem); } /* CTA banner heading scales with the hero */ .cta-banner__title { font-size: clamp(2rem, 2.6vw, 3rem); } /* Partner callout heading */ .partner__lead { font-size: clamp(1.3rem, 1.5vw, 1.7rem); } } @media (min-width: 1800px) { /* Ultrawide / 27" 1440p+ monitors — give the page a final hint of editorial confidence without ballooning the container. */ :root { --container: 1320px; --gutter: clamp(1.25rem, 3vw, 2.5rem); } .hero__title { font-size: clamp(3.5rem, 4vw, 5rem); } section { padding-block: clamp(4.5rem, 5vw, 8rem); } /* Pricing tag, partner__art-shape — slightly larger on huge displays */ .price-hero__price { font-size: clamp(3.4rem, 2.6rem + 2vw, 4.6rem); } } /* Ensure the trust strip, hero meta, and other flexed rows balance at desktop */ @media (min-width: 1440px) { .trust-strip__inner { gap: var(--space-7); } .hero__meta { gap: var(--space-6); } }