/* ========================================================================== Essay Writing Edge — Liquid Glass design system (marketing homepage) -------------------------------------------------------------------------- Loaded AFTER style.css / responsive.css. Every rule here is scoped under `.lg` (set on in index.html) or uses `lg-` prefixed class names that the legacy sheets never target, so the two systems don't fight and no `!important` escalation is needed. The legacy sheets still own #orderPage and the other pages (privacy/terms/blog), which are untouched. ========================================================================== */ /* ========================================================================== 1. TOKENS ========================================================================== */ :root { /* Spacing — strict 8px scale */ --lg-1: 8px; --lg-2: 16px; --lg-3: 24px; --lg-4: 32px; --lg-5: 40px; --lg-6: 48px; --lg-7: 64px; --lg-8: 80px; --lg-9: 96px; --lg-10: 120px; --lg-11: 160px; /* Shell */ --lg-max: 1200px; --lg-gutter: clamp(20px, 4vw, 40px); --lg-section-y: clamp(72px, 9vw, 136px); /* Radii */ --lg-r-sm: 12px; --lg-r-md: 20px; --lg-r-lg: 28px; --lg-r-xl: 36px; --lg-r-pill: 999px; /* Motion */ --lg-spring: cubic-bezier(0.16, 1, 0.3, 1); --lg-ease: cubic-bezier(0.4, 0, 0.2, 1); /* Type */ --lg-font-display: "Bricolage Grotesque", "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --lg-font-body: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --lg-font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace; } /* ---- Dark (default / showcase) ------------------------------------------ */ html[data-theme="dark"] { color-scheme: dark; --lg-bg: #05070E; --lg-bg-deep: #02040A; --lg-ink: #EAF1FF; --lg-ink-soft: #C6D3E7; --lg-ink-dim: #9DB0CA; /* Accents — aqua primary, azure secondary, orchid used only in blooms */ --lg-accent: #35E0C4; --lg-accent-text: #35E0C4; /* small accent-coloured text */ --lg-book-ink: #9DFBE8; /* lettering on the glass book */ --lg-book-glow: rgba(53, 224, 196, 0.55); --lg-accent-ink: #04120F; /* text ON accent */ --lg-accent-2: #5C9BFF; --lg-accent-3: #E877C0; /* Glass material */ --lg-glass-bg: linear-gradient( 152deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.07) 46%, rgba(255, 255, 255, 0.105) 100% ); --lg-glass-bg-solid: #111a2c; /* @supports fallback */ --lg-glass-border: rgba(255, 255, 255, 0.1); --lg-glass-rim: linear-gradient( 150deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.08) 26%, rgba(255, 255, 255, 0.02) 55%, rgba(255, 255, 255, 0.26) 100% ); --lg-glass-inner: radial-gradient( 120% 84% at 22% -14%, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 62% ); --lg-glass-blur: blur(28px) saturate(180%); --lg-scrim: rgba(6, 10, 20, 0.46); --lg-shadow: 0 32px 72px -28px rgba(0, 0, 0, 0.86), 0 8px 24px -14px rgba(0, 0, 0, 0.7); --lg-shadow-lift: 0 44px 96px -30px rgba(0, 0, 0, 0.9), 0 12px 32px -16px rgba(0, 0, 0, 0.72); --lg-inset: inset 0 1px 0 0 rgba(255, 255, 255, 0.16), inset 0 -1px 0 0 rgba(0, 0, 0, 0.32); --lg-hairline: rgba(255, 255, 255, 0.08); --lg-bloom-a: rgba(53, 224, 196, 0.42); --lg-bloom-b: rgba(92, 155, 255, 0.4); --lg-bloom-c: rgba(232, 119, 192, 0.18); --lg-grain-opacity: 0.05; } /* ---- Light --------------------------------------------------------------- */ html[data-theme="light"] { color-scheme: light; --lg-bg: #EEF2F9; --lg-bg-deep: #E2E9F4; --lg-ink: #08111F; --lg-ink-soft: #3B4B62; --lg-ink-dim: #56677F; --lg-accent: #0A8E7E; --lg-accent-text: #056052; --lg-book-ink: #06655A; --lg-book-glow: rgba(255, 255, 255, 0.92); --lg-accent-ink: #FFFFFF; --lg-accent-2: #2F6BE0; --lg-accent-3: #C0559A; --lg-glass-bg: linear-gradient( 152deg, rgba(255, 255, 255, 0.86) 0%, rgba(255, 255, 255, 0.56) 48%, rgba(255, 255, 255, 0.74) 100% ); --lg-glass-bg-solid: #FBFCFE; --lg-glass-border: rgba(12, 30, 58, 0.09); --lg-glass-rim: linear-gradient( 150deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.35) 30%, rgba(12, 30, 58, 0.05) 60%, rgba(255, 255, 255, 0.8) 100% ); --lg-glass-inner: radial-gradient( 120% 84% at 22% -14%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 62% ); --lg-glass-blur: blur(24px) saturate(170%); --lg-scrim: rgba(255, 255, 255, 0.6); --lg-shadow: 0 28px 64px -30px rgba(15, 38, 74, 0.34), 0 6px 18px -12px rgba(15, 38, 74, 0.22); --lg-shadow-lift: 0 40px 88px -32px rgba(15, 38, 74, 0.4), 0 10px 26px -14px rgba(15, 38, 74, 0.26); --lg-inset: inset 0 1px 0 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 0 rgba(15, 38, 74, 0.06); --lg-hairline: rgba(12, 30, 58, 0.09); --lg-bloom-a: rgba(10, 190, 168, 0.4); --lg-bloom-b: rgba(70, 130, 255, 0.36); --lg-bloom-c: rgba(220, 120, 190, 0.26); --lg-grain-opacity: 0.035; } /* ========================================================================== 2. SHELL ========================================================================== */ html { scroll-padding-top: 104px; scroll-behavior: smooth; } /* Reset. index.html still loads style.css, which carries one; the legal pages no longer load it at all, so the system has to provide its own. */ .lg, .lg *, .lg *::before, .lg *::after { box-sizing: border-box; } body.lg { margin: 0; } .lg h1, .lg h2, .lg h3, .lg h4, .lg h5, .lg h6, .lg p, .lg figure, .lg blockquote, .lg dl, .lg dd { margin: 0; } .lg ul, .lg ol { margin: 0; padding: 0; } .lg img, .lg svg, .lg video { max-width: 100%; } .lg button { font: inherit; color: inherit; } .lg a.logo, .lg .logo { text-decoration: none; } body.lg { /* nothing on the marketing page may widen the viewport */ overflow-x: clip; font-family: var(--lg-font-body); font-size: 17px; line-height: 1.7; color: var(--lg-ink); background: var(--lg-bg); letter-spacing: -0.005em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body.lg ::selection { background: var(--lg-accent); color: var(--lg-accent-ink); } .lg .lg-shell { width: 100%; max-width: min(var(--lg-max), 100vw); margin-inline: auto; padding-inline: var(--lg-gutter); } .lg .lg-section { position: relative; padding-block: var(--lg-section-y); } /* .sr-only comes from style.css on index.html, but the legal pages no longer load it — without this the hamburger button renders the word "Menu". */ .lg-visually-hidden, .lg .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Keyboard focus — visible everywhere */ .lg :focus-visible { outline: 2px solid var(--lg-accent); outline-offset: 3px; border-radius: 6px; } /* Scroll reveal — opt-in, driven by setupReveal() in js/main.js */ .lg [data-reveal] { opacity: 0; transform: translate3d(0, 20px, 0); transition: opacity 0.8s var(--lg-spring), transform 0.8s var(--lg-spring); } .lg [data-reveal].is-in { opacity: 1; transform: none; } /* ========================================================================== 3. ATMOSPHERIC BACKGROUND FIELD The thing that makes glass legible as glass. ========================================================================== */ .lg-field { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; background: radial-gradient(90% 52% at 50% -8%, rgba(255, 255, 255, 0.09), transparent 64%), linear-gradient(180deg, #070C17 0%, #060A14 46%, var(--lg-bg-deep) 100%); } html[data-theme="light"] .lg-field { background: radial-gradient(120% 78% at 50% -18%, rgba(255, 255, 255, 0.9), transparent 62%), linear-gradient(180deg, #F7F9FD 0%, var(--lg-bg) 46%, var(--lg-bg-deep) 100%); } .lg-field__bloom { position: absolute; border-radius: 50%; filter: blur(110px); will-change: transform; } .lg-field__bloom--a { width: 46vw; height: 46vw; max-width: 700px; max-height: 700px; top: -12vw; left: -6vw; background: var(--lg-bloom-a); animation: lg-drift-a 34s var(--lg-ease) infinite alternate; } .lg-field__bloom--b { width: 44vw; height: 44vw; max-width: 660px; max-height: 660px; top: 2vh; right: -6vw; background: var(--lg-bloom-b); animation: lg-drift-b 40s var(--lg-ease) infinite alternate; } .lg-field__bloom--c { width: 40vw; height: 40vw; max-width: 560px; max-height: 560px; bottom: -22vw; left: 30vw; background: var(--lg-bloom-c); animation: lg-drift-c 46s var(--lg-ease) infinite alternate; } @keyframes lg-drift-a { to { transform: translate3d(9vw, 7vh, 0) scale(1.14); } } @keyframes lg-drift-b { to { transform: translate3d(-8vw, 10vh, 0) scale(1.1); } } @keyframes lg-drift-c { to { transform: translate3d(6vw, -8vh, 0) scale(1.18); } } /* Fine grain — stops the blooms from banding */ .lg-field__grain { position: absolute; inset: -50%; opacity: var(--lg-grain-opacity); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode: overlay; } /* ========================================================================== 4. GLASS PRIMITIVE Bright 1px specular rim + soft inner glow + darker inner bottom edge. ========================================================================== */ .lg-glass { position: relative; /* inner glow painted over the body tint — both live in the element's own background so nothing has to sit on a negative z-index */ background: var(--lg-glass-inner), var(--lg-glass-bg); -webkit-backdrop-filter: var(--lg-glass-blur); backdrop-filter: var(--lg-glass-blur); border-radius: var(--lg-r-lg); box-shadow: var(--lg-inset), var(--lg-shadow); } /* Refracted rim — a real 1px specular edge, brightest top-left. Sits above everything: it is a hairline at the very edge of the panel. */ .lg-glass::before { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; padding: 1px; background: var(--lg-glass-rim); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; pointer-events: none; } .lg-glass--lift { transition: transform 0.55s var(--lg-spring), box-shadow 0.55s var(--lg-spring), border-color 0.55s var(--lg-spring); } .lg-glass--lift:hover { transform: translateY(-6px) scale(1.008); box-shadow: var(--lg-inset), var(--lg-shadow-lift); } /* Solid fallback where backdrop-filter is unavailable */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .lg-glass { background: var(--lg-glass-bg-solid); border: 1px solid var(--lg-glass-border); } } /* Users who ask for less transparency get opaque, legible panels */ @media (prefers-reduced-transparency: reduce) { .lg-glass { background: var(--lg-glass-bg-solid); -webkit-backdrop-filter: none; backdrop-filter: none; } .lg-field__bloom { opacity: 0.35; } } /* ========================================================================== 5. TYPOGRAPHY ========================================================================== */ .lg h1, .lg h2, .lg h3, .lg h4 { font-family: var(--lg-font-display); font-weight: 600; line-height: 1.06; letter-spacing: -0.032em; color: var(--lg-ink); text-wrap: balance; } .lg-display { font-size: clamp(2.6rem, 5.6vw, 4.4rem); font-weight: 600; line-height: 1.02; letter-spacing: -0.04em; } .lg-h2 { font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.06; } .lg-h3 { font-family: var(--lg-font-display); font-size: 1.3125rem; font-weight: 600; line-height: 1.24; letter-spacing: -0.022em; } .lg-lead { font-size: clamp(1.0625rem, 1.35vw, 1.1875rem); line-height: 1.68; color: var(--lg-ink-soft); max-width: 56ch; text-wrap: pretty; } .lg-body { color: var(--lg-ink-soft); text-wrap: pretty; } .lg-eyebrow { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lg-accent-text); } .lg-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* Section header block */ .lg-head { display: flex; flex-direction: column; gap: var(--lg-2); margin-bottom: var(--lg-8); } .lg-head--center { align-items: center; text-align: center; } .lg-head--center .lg-lead { max-width: 60ch; } .lg-head__title { max-width: 20ch; } .lg-head--center .lg-head__title { max-width: 24ch; } /* ========================================================================== 6. CONTROLS ========================================================================== */ .lg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 28px; border: 0; border-radius: var(--lg-r-pill); font-family: var(--lg-font-body); font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform 0.5s var(--lg-spring), box-shadow 0.5s var(--lg-spring), background 0.35s var(--lg-ease), color 0.35s var(--lg-ease); } .lg-btn svg { flex: none; } .lg-btn--primary { color: var(--lg-accent-ink); background: linear-gradient(168deg, color-mix(in oklab, var(--lg-accent) 88%, white) 0%, var(--lg-accent) 58%, color-mix(in oklab, var(--lg-accent) 80%, var(--lg-accent-2)) 100%); box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 0 rgba(0, 0, 0, 0.18), 0 16px 34px -14px color-mix(in oklab, var(--lg-accent) 60%, transparent), 0 4px 12px -6px rgba(0, 0, 0, 0.4); } .lg-btn--primary:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 0 rgba(0, 0, 0, 0.18), 0 24px 48px -16px color-mix(in oklab, var(--lg-accent) 68%, transparent), 0 6px 16px -8px rgba(0, 0, 0, 0.45); } .lg-btn--ghost { color: var(--lg-ink); background: var(--lg-glass-bg); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); box-shadow: var(--lg-inset), 0 12px 30px -18px rgba(0, 0, 0, 0.6); border: 1px solid var(--lg-glass-border); } .lg-btn--ghost:hover { transform: translateY(-3px); box-shadow: var(--lg-inset), 0 20px 40px -18px rgba(0, 0, 0, 0.66); } .lg-btn--sm { padding: 11px 20px; font-size: 0.9375rem; } .lg-btn--block { width: 100%; } /* Chip / pill label */ .lg-chip { display: inline-flex; align-items: center; gap: 9px; padding: 7px 16px 7px 12px; border-radius: var(--lg-r-pill); font-size: 0.8125rem; font-weight: 500; letter-spacing: -0.005em; color: var(--lg-ink-soft); background: var(--lg-glass-bg); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); border: 1px solid var(--lg-glass-border); box-shadow: var(--lg-inset); } .lg-chip__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lg-accent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--lg-accent) 22%, transparent); } /* Icon tile used across cards */ .lg-icon { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 15px; color: var(--lg-accent); background: linear-gradient(160deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.03)); border: 1px solid var(--lg-glass-border); box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.22), 0 10px 22px -14px rgba(0, 0, 0, 0.7); } html[data-theme="light"] .lg-icon { background: linear-gradient(160deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.5)); } .lg-icon svg { width: 23px; height: 23px; } /* ========================================================================== 7. HEADER ========================================================================== */ .lg .lg-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding-block: 14px; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 0; box-shadow: none; transition: padding 0.5s var(--lg-spring); } .lg .lg-header__bar { display: flex; align-items: center; gap: var(--lg-3); padding: 10px 10px 10px 22px; border-radius: var(--lg-r-pill); background: transparent; box-shadow: none; transition: background 0.45s var(--lg-ease), box-shadow 0.45s var(--lg-ease), -webkit-backdrop-filter 0.45s var(--lg-ease); } .lg .lg-header.scrolled .lg-header__bar { background: var(--lg-glass-bg); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); box-shadow: var(--lg-inset), 0 18px 44px -26px rgba(0, 0, 0, 0.8); } .lg .lg-header.scrolled .lg-header__bar::before { content: ""; position: absolute; z-index: 3; inset: 0; border-radius: inherit; padding: 1px; background: var(--lg-glass-rim); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; pointer-events: none; } .lg .lg-header__bar { position: relative; } .lg .lg-header .logo { font-family: var(--lg-font-display); font-size: 1.125rem; font-weight: 600; letter-spacing: -0.03em; color: var(--lg-ink); background: none; -webkit-text-fill-color: currentColor; cursor: pointer; margin-right: auto; display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; } .lg .lg-header .logo:hover { transform: none; color: var(--lg-ink); } .lg .lg-logo-mark { width: 28px; height: 28px; flex: none; border-radius: 9px; display: grid; place-items: center; color: var(--lg-accent-ink); background: linear-gradient(150deg, color-mix(in oklab, var(--lg-accent) 90%, white), var(--lg-accent) 55%, var(--lg-accent-2)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 8px 18px -10px color-mix(in oklab, var(--lg-accent) 70%, transparent); } .lg .lg-logo-mark svg { width: 16px; height: 16px; } .lg .nav-container { display: flex; align-items: center; gap: var(--lg-3); } .lg .nav-menu { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; } .lg .nav-menu a { display: inline-block; padding: 9px 14px; border-radius: var(--lg-r-pill); font-size: 0.9375rem; font-weight: 500; color: var(--lg-ink-soft); text-decoration: none; transition: color 0.3s var(--lg-ease), background 0.3s var(--lg-ease); } .lg .nav-menu a::after { display: none; } .lg .nav-menu a:hover { color: var(--lg-ink); background: color-mix(in oklab, var(--lg-ink) 8%, transparent); transform: none; } .lg .header-actions { display: flex; align-items: center; gap: 10px; } .lg .order-nav { display: flex; } .lg .login-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: var(--lg-r-pill); font-size: 0.9375rem; font-weight: 500; color: var(--lg-ink-soft); background: none; border: 0; box-shadow: none; text-decoration: none; transition: color 0.3s var(--lg-ease), background 0.3s var(--lg-ease); } .lg .login-btn:hover { color: var(--lg-ink); background: color-mix(in oklab, var(--lg-ink) 8%, transparent); transform: none; box-shadow: none; } .lg .header-actions .place-order-btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; border-radius: var(--lg-r-pill); font-size: 0.9375rem; font-weight: 600; text-decoration: none; color: var(--lg-accent-ink); background: linear-gradient(168deg, color-mix(in oklab, var(--lg-accent) 88%, white), var(--lg-accent) 60%, color-mix(in oklab, var(--lg-accent) 80%, var(--lg-accent-2))); box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.5), 0 14px 30px -16px color-mix(in oklab, var(--lg-accent) 62%, transparent); transition: transform 0.5s var(--lg-spring), box-shadow 0.5s var(--lg-spring); } .lg .header-actions .place-order-btn:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.55), 0 20px 40px -18px color-mix(in oklab, var(--lg-accent) 70%, transparent); } /* Theme toggle */ .lg .lg-theme-toggle { display: grid; place-items: center; width: 38px; height: 38px; flex: none; padding: 0; border-radius: var(--lg-r-pill); color: var(--lg-ink-soft); background: color-mix(in oklab, var(--lg-ink) 6%, transparent); border: 1px solid var(--lg-glass-border); cursor: pointer; transition: color 0.3s var(--lg-ease), background 0.3s var(--lg-ease); } .lg .lg-theme-toggle:hover { color: var(--lg-ink); background: color-mix(in oklab, var(--lg-ink) 12%, transparent); } .lg .lg-theme-toggle svg { width: 17px; height: 17px; } html[data-theme="dark"] .lg-theme-toggle .lg-icon-sun { display: block; } html[data-theme="dark"] .lg-theme-toggle .lg-icon-moon { display: none; } html[data-theme="light"] .lg-theme-toggle .lg-icon-sun { display: none; } html[data-theme="light"] .lg-theme-toggle .lg-icon-moon { display: block; } /* Hamburger */ .lg .mobile-menu-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; padding: 0; border: 1px solid var(--lg-glass-border); border-radius: 13px; background: color-mix(in oklab, var(--lg-ink) 6%, transparent); cursor: pointer; box-shadow: none; } .lg .hamburger-line { display: block; width: 17px; height: 1.5px; margin: 0 auto; border-radius: 2px; background: var(--lg-ink); transition: transform 0.45s var(--lg-spring), opacity 0.25s var(--lg-ease); } .lg .mobile-menu-toggle.active .hamburger-line:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .lg .mobile-menu-toggle.active .hamburger-line:nth-child(2) { opacity: 0; } .lg .mobile-menu-toggle.active .hamburger-line:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* ========================================================================== 8. HERO ========================================================================== */ .lg .lg-hero { position: relative; padding-top: clamp(118px, 11vw, 152px); padding-bottom: clamp(64px, 7vw, 104px); overflow: visible; } .lg .lg-hero__grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); align-items: center; gap: clamp(40px, 5vw, 72px); } .lg .lg-hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--lg-3); } .lg .lg-hero__title { margin: 4px 0 0; max-width: 15ch; } .lg .lg-hero__title em { font-style: normal; background: linear-gradient(96deg, var(--lg-accent) 0%, var(--lg-accent-2) 62%, var(--lg-accent-3) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .lg .lg-hero__lead { max-width: 48ch; } .lg .lg-hero__actions { display: flex; flex-wrap: wrap; gap: var(--lg-2); margin-top: var(--lg-1); } .lg .lg-hero__facts { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: var(--lg-2); padding: 0; list-style: none; } .lg .lg-hero__facts li { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9375rem; color: var(--lg-ink-dim); } .lg .lg-hero__facts svg { width: 16px; height: 16px; color: var(--lg-accent); flex: none; } /* Hero strip — anchors the bottom of the hero, no dead space */ .lg .lg-hero__strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-top: clamp(36px, 4vw, 56px); padding: 0; border-radius: var(--lg-r-lg); overflow: hidden; } .lg .lg-strip-cell { padding: var(--lg-4) var(--lg-3); display: flex; flex-direction: column; gap: 6px; box-shadow: 1px 0 0 0 var(--lg-hairline); } .lg .lg-strip-cell:last-child { box-shadow: none; } .lg .lg-strip-cell__value { font-family: var(--lg-font-display); font-size: clamp(1.5rem, 2.3vw, 1.875rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1.1; color: var(--lg-ink); } .lg .lg-strip-cell__label { font-size: 0.875rem; line-height: 1.5; color: var(--lg-ink-dim); } /* ========================================================================== 9. THE GLASS BOOK Boards (front cover / back cover / spine) wrapped around a solid frosted page block. No backdrop-filter anywhere in here — blurred layers inside a preserve-3d subtree are the most expensive thing a browser can be asked to composite. Translucent gradients over the background blooms do the work. ========================================================================== */ .lg .lg-book-stage { --bw: 286px; /* board width */ --bh: 396px; /* board height */ --bd: 72px; /* spine depth */ --pw: calc(var(--bw) - 16px); /* page block */ --ph: calc(var(--bh) - 28px); --pd: calc(var(--bd) - 15px); position: relative; display: grid; place-items: center; min-height: calc(var(--bh) + 128px); perspective: 1600px; perspective-origin: 50% 46%; /* The ambient glow and the rotating book both paint outside the stage box. overflow-clip-margin lets them do that without adding scrollable overflow, which was widening the mobile layout viewport to 426px. */ overflow: clip; overflow-clip-margin: 110px; } /* Ambient glow the book sits inside — reads as light spilling off the glass */ html[data-theme="light"] .lg .lg-book-stage::before { opacity: 0.62; filter: blur(50px); } .lg .lg-book-stage::before { content: ""; position: absolute; /* kept inside the stage box on the inline axis: the blur does the spreading, and blur spill paints without adding scrollable overflow */ width: 100%; height: 112%; left: 0; top: -6%; background: radial-gradient(44% 38% at 40% 36%, color-mix(in oklab, var(--lg-accent) 42%, transparent), transparent 70%), radial-gradient(46% 44% at 66% 64%, color-mix(in oklab, var(--lg-accent-2) 36%, transparent), transparent 72%); filter: blur(58px); opacity: 0.9; pointer-events: none; } .lg .lg-book-parallax { position: relative; transform-style: preserve-3d; transform: rotateX(calc(var(--lg-py, 0) * 5deg)) rotateY(calc(var(--lg-px, 0) * 7deg)); transition: transform 900ms var(--lg-spring); will-change: transform; } .lg .lg-book-tilt { transform-style: preserve-3d; transform: rotateX(13deg) rotateZ(-2deg); } .lg .lg-book-float { transform-style: preserve-3d; animation: lg-book-bob 7.5s ease-in-out infinite alternate; } @keyframes lg-book-bob { from { transform: translate3d(0, -11px, 0); } to { transform: translate3d(0, 13px, 0); } } .lg .book { position: relative; width: var(--bw); height: var(--bh); transform-style: preserve-3d; animation: lg-book-spin 26s cubic-bezier(0.5, 0, 0.5, 1) infinite; will-change: transform; } /* Slow eased rotation — lingers on the boards, sweeps through the edges */ @keyframes lg-book-spin { 0% { transform: rotateY(-26deg); } 25% { transform: rotateY(64deg); } 50% { transform: rotateY(154deg); } 75% { transform: rotateY(244deg); } 100% { transform: rotateY(334deg); } } /* ---- Boards -------------------------------------------------------------- */ .lg .book-face { position: absolute; border-radius: 4px 13px 13px 4px; background: linear-gradient( 146deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.13) 30%, rgba(255, 255, 255, 0.06) 58%, rgba(255, 255, 255, 0.34) 100% ), radial-gradient(86% 64% at 20% 8%, color-mix(in oklab, var(--lg-accent) 40%, transparent), transparent 66%), radial-gradient(80% 78% at 88% 92%, color-mix(in oklab, var(--lg-accent-2) 38%, transparent), transparent 70%); border: 1px solid rgba(255, 255, 255, 0.46); box-shadow: /* chromatic dispersion at the silhouette — the giveaway of thick glass */ inset 2px 0 0 -1px rgba(140, 225, 255, 0.4), inset -2px 0 0 -1px rgba(255, 165, 220, 0.3), inset 0 2px 0 -1px rgba(255, 255, 255, 0.75), inset 0 -2px 0 -1px rgba(0, 0, 0, 0.42), inset 0 0 52px rgba(255, 255, 255, 0.14), 0 0 0 1px rgba(255, 255, 255, 0.07); } html[data-theme="light"] .lg .book-face { background: linear-gradient( 146deg, rgba(255, 255, 255, 0.72) 0%, rgba(176, 202, 230, 0.5) 38%, rgba(150, 184, 220, 0.52) 66%, rgba(255, 255, 255, 0.6) 100% ), radial-gradient(84% 62% at 22% 10%, color-mix(in oklab, var(--lg-accent) 30%, transparent), transparent 64%), radial-gradient(78% 76% at 86% 90%, color-mix(in oklab, var(--lg-accent-2) 30%, transparent), transparent 68%); border-color: rgba(255, 255, 255, 0.95); box-shadow: inset 2px 0 0 -1px rgba(70, 190, 220, 0.4), inset -2px 0 0 -1px rgba(230, 130, 200, 0.32), inset 0 2px 0 -1px rgba(255, 255, 255, 1), inset 0 -2px 0 -1px rgba(24, 56, 100, 0.22), inset 0 0 44px rgba(255, 255, 255, 0.35), 0 0 0 1px rgba(24, 56, 100, 0.06); } .lg .book-cover, .lg .book-back { inset: 0; width: var(--bw); height: var(--bh); transform-style: preserve-3d; } .lg .book-cover { transform: translateZ(calc(var(--bd) / 2)); } .lg .book-back { transform: translateZ(calc(var(--bd) / -2)) rotateY(180deg); /* NB: no `filter` here. A filter forces transform-style back to flat, which breaks backface-visibility on the wordmark inside and shows it through the book mirrored. The far board is shaded with an overlay instead. */ box-shadow: inset 2px 0 0 -1px rgba(140, 225, 255, 0.4), inset -2px 0 0 -1px rgba(255, 165, 220, 0.3), inset 0 2px 0 -1px rgba(255, 255, 255, 0.75), inset 0 -2px 0 -1px rgba(0, 0, 0, 0.42), inset 0 0 52px rgba(255, 255, 255, 0.14), inset 0 0 0 2000px rgba(3, 10, 22, 0.22), 0 0 0 1px rgba(255, 255, 255, 0.07); } html[data-theme="light"] .lg .book-back { box-shadow: inset 2px 0 0 -1px rgba(70, 190, 220, 0.4), inset -2px 0 0 -1px rgba(230, 130, 200, 0.32), inset 0 2px 0 -1px rgba(255, 255, 255, 1), inset 0 -2px 0 -1px rgba(24, 56, 100, 0.22), inset 0 0 44px rgba(255, 255, 255, 0.35), inset 0 0 0 2000px rgba(24, 56, 100, 0.1), 0 0 0 1px rgba(24, 56, 100, 0.06); } /* Travelling specular streak — catches the light as the board turns */ .lg .book-cover::after, .lg .book-back::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; background: linear-gradient( 102deg, transparent 44.5%, rgba(255, 255, 255, 0.22) 47.5%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0.2) 52.5%, transparent 55.5% ); background-size: 280% 100%; animation: lg-specular 26s linear infinite; mix-blend-mode: screen; opacity: 0.6; pointer-events: none; } .lg .book-back::after { animation-delay: -13s; } @keyframes lg-specular { 0% { background-position: 200% 0; } 100% { background-position: -100% 0; } } /* Hinge groove — the fold that separates board from block on a bound book */ .lg .book-cover::before { content: ""; position: absolute; top: 6px; bottom: 6px; left: 15px; width: 4px; border-radius: 2px; background: linear-gradient( 90deg, rgba(0, 0, 0, 0.24), rgba(0, 0, 0, 0.1) 55%, rgba(255, 255, 255, 0.3) ); pointer-events: none; } html[data-theme="light"] .lg .book-cover::before { background: linear-gradient( 90deg, rgba(30, 66, 112, 0.2), rgba(30, 66, 112, 0.07) 55%, rgba(255, 255, 255, 0.9) ); } /* Spine — the most opaque face, tinted so the binding reads as solid */ .lg .book-spine { display: grid; place-items: center; width: var(--bd); height: var(--bh); top: 0; left: calc(50% - var(--bd) / 2); border-radius: 5px; transform-style: preserve-3d; transform: rotateY(-90deg) translateZ(calc(var(--bw) / 2)); background: linear-gradient( 90deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.12) 22%, rgba(255, 255, 255, 0.08) 78%, rgba(255, 255, 255, 0.3) 100% ), linear-gradient( 180deg, color-mix(in oklab, var(--lg-accent) 34%, transparent), color-mix(in oklab, var(--lg-accent-2) 32%, transparent) ); } /* ---- Page block ---------------------------------------------------------- */ .lg .book-pages { position: absolute; top: 14px; bottom: 14px; left: 0; right: 16px; transform-style: preserve-3d; } .lg .book-pages > i { position: absolute; display: block; background-color: rgba(255, 255, 255, 0.1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(0, 0, 0, 0.18); } html[data-theme="light"] .lg .book-pages > i { background-color: rgba(255, 255, 255, 0.55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(40, 80, 130, 0.18); } /* Front and back of the block — frosted, so the boards read as separate glass */ .lg .book-pages__front, .lg .book-pages__back { inset: 0; border-radius: 1px 9px 9px 1px; background-image: radial-gradient(74% 56% at 26% 14%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 70%), linear-gradient( 146deg, rgba(255, 255, 255, 0.55) 0%, rgba(210, 232, 250, 0.3) 46%, rgba(236, 246, 255, 0.45) 100% ); background-color: rgba(226, 240, 255, 0.5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -1px 0 rgba(10, 26, 48, 0.3), inset 0 0 30px rgba(255, 255, 255, 0.18); } .lg .book-pages__front { transform: translateZ(calc(var(--pd) / 2)); } .lg .book-pages__back { transform: translateZ(calc(var(--pd) / -2)) rotateY(180deg); } .lg .book-pages__gutter { width: var(--pd); height: 100%; top: 0; left: calc(50% - var(--pd) / 2); transform: rotateY(-90deg) translateZ(calc(var(--pw) / 2)); background-color: rgba(255, 255, 255, 0.09); } /* Cut edges carry the leaf striping */ .lg .book-pages__edge, .lg .book-pages__top, .lg .book-pages__bottom { background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 55%), repeating-linear-gradient( var(--lg-leaf, 90deg), rgba(255, 255, 255, 0.86) 0px, rgba(126, 166, 210, 0.3) 1.5px, rgba(255, 255, 255, 0.86) 3px ); background-color: rgba(238, 247, 255, 0.6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(20, 40, 70, 0.35); } html[data-theme="light"] .lg .book-pages__edge, html[data-theme="light"] .lg .book-pages__top, html[data-theme="light"] .lg .book-pages__bottom { background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 55%), repeating-linear-gradient( var(--lg-leaf, 90deg), rgba(255, 255, 255, 0.95) 0px, rgba(88, 128, 178, 0.24) 1.5px, rgba(255, 255, 255, 0.95) 3px ); background-color: rgba(255, 255, 255, 0.8); } .lg .book-pages__edge { width: var(--pd); height: 100%; top: 0; left: calc(50% - var(--pd) / 2); --lg-leaf: 0deg; border-radius: 4px; transform: rotateY(90deg) translateZ(calc(var(--pw) / 2)); } .lg .book-pages__top, .lg .book-pages__bottom { width: 100%; height: var(--pd); left: 0; top: calc(50% - var(--pd) / 2); --lg-leaf: 90deg; /* head and tail sit in shade — the fore-edge is the lit one */ filter: brightness(0.72); } .lg .book-pages__top { transform: rotateX(90deg) translateZ(calc(var(--ph) / 2)); } .lg .book-pages__bottom { transform: rotateX(-90deg) translateZ(calc(var(--ph) / 2)); } /* ---- Lettering ---------------------------------------------------------- Front board: the 100% human-written seal. Back board: the wordmark. Spine: "Edge" — literally on the edge of the book. Each lives in its own face and is backface-hidden, so nothing shows through mirrored as the book turns. */ .lg .book-mark { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 0 30px; z-index: 2; text-align: center; color: var(--lg-book-ink); backface-visibility: hidden; -webkit-backface-visibility: hidden; } .lg .book-seal { position: relative; display: grid; place-items: center; width: 104px; height: 104px; border-radius: 50%; border: 1.5px solid color-mix(in oklab, var(--lg-book-ink) 55%, transparent); box-shadow: 0 0 26px -6px var(--lg-book-glow), inset 0 0 22px -8px var(--lg-book-glow); } .lg .book-seal::before { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 1px solid color-mix(in oklab, var(--lg-book-ink) 24%, transparent); } .lg .book-seal__pct { font-family: var(--lg-font-display); font-size: 1.75rem; font-weight: 600; letter-spacing: -0.04em; line-height: 1; text-shadow: 0 0 18px var(--lg-book-glow); } .lg .book-seal__label { font-family: var(--lg-font-body); font-size: 0.6875rem; font-weight: 600; line-height: 1.55; letter-spacing: 0.24em; text-transform: uppercase; text-shadow: 0 0 16px var(--lg-book-glow); } .lg .book-mark--back .book-mark__name { font-family: var(--lg-font-display); font-size: 1.625rem; font-weight: 600; line-height: 1.1; letter-spacing: -0.035em; text-shadow: 0 0 20px var(--lg-book-glow); } .lg .book-spine__text { font-family: var(--lg-font-display); font-size: 1.0625rem; font-weight: 600; line-height: 1; letter-spacing: 0.34em; text-transform: uppercase; color: var(--lg-book-ink); writing-mode: vertical-rl; transform: rotate(180deg); text-indent: 0.34em; text-shadow: 0 0 18px var(--lg-book-glow); backface-visibility: hidden; -webkit-backface-visibility: hidden; } /* Contact shadow so the object occupies space */ .lg .lg-book-shadow { position: absolute; left: 50%; bottom: 11%; width: 300px; height: 46px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.8), transparent 76%); filter: blur(24px); animation: lg-book-shadow 7.5s ease-in-out infinite alternate; pointer-events: none; } html[data-theme="light"] .lg .lg-book-shadow { background: radial-gradient(closest-side, rgba(20, 44, 84, 0.55), transparent 78%); } @keyframes lg-book-shadow { from { transform: translateX(-50%) scale(0.88); opacity: 0.9; } to { transform: translateX(-50%) scale(1.08); opacity: 0.5; } } /* ========================================================================== 10. CARD GRIDS ========================================================================== */ .lg-grid { display: grid; gap: var(--lg-3); } .lg-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lg-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .lg-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lg-card { display: flex; flex-direction: column; gap: var(--lg-2); padding: var(--lg-4); border-radius: var(--lg-r-lg); } .lg-card__title { font-family: var(--lg-font-display); font-size: 1.125rem; font-weight: 600; letter-spacing: -0.024em; line-height: 1.28; color: var(--lg-ink); margin: 0; } .lg-card__body { margin: 0; font-size: 1rem; line-height: 1.62; color: var(--lg-ink-soft); } /* --- Capability cards (#featuresGrid) ------------------------------------ Class names on this page are all `lg-` prefixed: the legacy sheet styles `.feature-card p` at a higher specificity than a single-class rule, so reusing its names would silently win over the new design. */ .lg .lg-feature-card { display: flex; flex-direction: column; gap: var(--lg-2); padding: var(--lg-4); border-radius: var(--lg-r-lg); text-align: left; } .lg .lg-feature-card h3 { margin: 0; } .lg .lg-feature-card p { margin: 0; } /* --- Service cards -------------------------------------------------------- */ .lg .lg-service { display: flex; flex-direction: column; gap: var(--lg-2); padding: var(--lg-5) var(--lg-4) var(--lg-4); border-radius: var(--lg-r-lg); cursor: pointer; text-align: left; width: 100%; font: inherit; color: inherit; border: 0; } .lg .lg-service__price { margin-top: auto; padding-top: var(--lg-3); display: flex; align-items: baseline; gap: 8px; border-top: 1px solid var(--lg-hairline); } .lg .lg-service__price b { font-family: var(--lg-font-display); font-size: 1.5rem; font-weight: 600; letter-spacing: -0.035em; color: var(--lg-ink); } .lg .lg-service__price span { font-size: 0.875rem; color: var(--lg-ink-dim); } .lg .lg-list { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 0; padding: 0; list-style: none; } .lg .lg-list li { position: relative; display: flex; gap: 10px; align-items: flex-start; font-size: 0.9375rem; line-height: 1.55; color: var(--lg-ink-soft); } .lg .lg-list svg { width: 16px; height: 16px; margin-top: 4px; flex: none; color: var(--lg-accent); } .lg .lg-service__cta { display: inline-flex; align-items: center; gap: 7px; margin-top: var(--lg-2); font-size: 0.9375rem; font-weight: 600; color: var(--lg-accent-text); } .lg .lg-service__cta svg { width: 15px; height: 15px; transition: transform 0.5s var(--lg-spring); } .lg .lg-service:hover .lg-service__cta svg { transform: translateX(4px); } /* --- Pledges (#ratingsGrid) ---------------------------------------------- */ .lg .lg-pledge { display: flex; flex-direction: column; gap: var(--lg-2); padding: var(--lg-4); border-radius: var(--lg-r-lg); } .lg .lg-pledge__kicker { font-family: var(--lg-font-display); font-size: clamp(1.75rem, 2.6vw, 2.25rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1.05; background: linear-gradient(120deg, var(--lg-accent), var(--lg-accent-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* --- Steps (#stepsContainer) --------------------------------------------- */ .lg .lg-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--lg-2); position: relative; } .lg .lg-step { display: flex; flex-direction: column; gap: 14px; padding: var(--lg-3); border-radius: var(--lg-r-md); } .lg .lg-step__n { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--lg-r-pill); font-family: var(--lg-font-display); font-size: 0.9375rem; font-weight: 600; color: var(--lg-accent-ink); background: linear-gradient(150deg, color-mix(in oklab, var(--lg-accent) 90%, white), var(--lg-accent) 60%, var(--lg-accent-2)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 10px 22px -12px color-mix(in oklab, var(--lg-accent) 70%, transparent); } .lg .lg-step__title { font-family: var(--lg-font-display); font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.022em; line-height: 1.28; margin: 0; } .lg .lg-step__body { margin: 0; font-size: 0.9063rem; line-height: 1.6; color: var(--lg-ink-soft); } /* --- Subject coverage (#tutorsCarousel) ----------------------------------- */ .lg .lg-coverage { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--lg-3); } .lg .lg-coverage__card { display: flex; flex-direction: column; gap: 14px; padding: var(--lg-4); border-radius: var(--lg-r-lg); } .lg .lg-coverage__meta { display: flex; align-items: flex-start; gap: 8px; margin-top: auto; padding-top: var(--lg-2); border-top: 1px solid var(--lg-hairline); font-size: 0.8125rem; color: var(--lg-ink-dim); } .lg .lg-coverage__meta svg { width: 15px; height: 15px; margin-top: 4px; flex: none; color: var(--lg-accent); } .lg .lg-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; } .lg .lg-tags li { padding: 4px 10px; border-radius: var(--lg-r-pill); font-size: 0.8125rem; color: var(--lg-ink-soft); background: color-mix(in oklab, var(--lg-ink) 7%, transparent); border: 1px solid var(--lg-hairline); } /* --- Split layout: substantial column each side, no dead zones ----------- */ .lg .lg-split { display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); gap: clamp(32px, 5vw, 72px); align-items: start; } .lg .lg-split__aside { position: sticky; top: 128px; display: flex; flex-direction: column; align-items: flex-start; gap: var(--lg-3); } .lg .lg-split__aside .lg-head { margin-bottom: 0; } .lg .lg-inline-link { color: var(--lg-accent-text); text-decoration: none; border-bottom: 1px solid color-mix(in oklab, var(--lg-accent) 40%, transparent); } .lg .lg-inline-link:hover { border-bottom-color: var(--lg-accent); } /* --- Steps as a vertical run -------------------------------------------- */ .lg .lg-steps { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: none; } .lg .lg-step { display: flex; flex-direction: row; align-items: flex-start; gap: var(--lg-3); padding: var(--lg-3) var(--lg-4); border-radius: var(--lg-r-md); } .lg .lg-step__text { display: flex; flex-direction: column; gap: 5px; } /* ========================================================================== 11. PRICING ========================================================================== */ .lg .lg-price-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: clamp(24px, 3.5vw, 48px); align-items: start; } .lg .lg-price-panel { padding: var(--lg-5); border-radius: var(--lg-r-xl); } .lg .lg-price-panel__title { margin: 0 0 var(--lg-3); } .lg .lg-price-layout { align-items: stretch; } .lg .lg-price-side .lg-card b { color: var(--lg-ink); font-weight: 600; } .lg .lg-rate-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; } .lg .lg-rate-table th, .lg .lg-rate-table td { padding: 15px 8px; text-align: right; border-bottom: 1px solid var(--lg-hairline); } .lg .lg-rate-table th:first-child, .lg .lg-rate-table td:first-child { text-align: left; padding-left: 0; } .lg .lg-rate-table th:last-child, .lg .lg-rate-table td:last-child { padding-right: 0; } .lg .lg-rate-table thead th { font-family: var(--lg-font-body); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lg-ink-dim); padding-top: 0; } .lg .lg-rate-table tbody th { font-family: var(--lg-font-body); font-size: 0.9688rem; font-weight: 500; color: var(--lg-ink); } .lg .lg-rate-table td { font-size: 1rem; color: var(--lg-ink-soft); } .lg .lg-rate-table td b { font-family: var(--lg-font-display); font-size: 1.125rem; font-weight: 600; letter-spacing: -0.03em; color: var(--lg-ink); } .lg .lg-rate-table tbody tr:last-child th, .lg .lg-rate-table tbody tr:last-child td { border-bottom: 0; } .lg .lg-rate-note { margin: var(--lg-3) 0 0; font-size: 0.875rem; line-height: 1.6; color: var(--lg-ink-dim); } .lg .lg-price-side { display: flex; flex-direction: column; gap: var(--lg-3); } .lg .lg-price-side .lg-card { padding: var(--lg-4); } /* ========================================================================== 12. REVIEWS ========================================================================== */ .lg .lg-reviews-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--lg-3); } .lg .lg-review { display: flex; flex-direction: column; gap: var(--lg-3); padding: var(--lg-4); border-radius: var(--lg-r-lg); opacity: 1; transform: none; animation: none; } .lg .lg-review__stars { display: flex; gap: 3px; color: var(--lg-accent); } .lg .lg-review__stars svg { width: 16px; height: 16px; } .lg .lg-review__text { margin: 0; font-size: 1rem; line-height: 1.66; color: var(--lg-ink); } .lg .lg-review__who { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: var(--lg-2); border-top: 1px solid var(--lg-hairline); } .lg .lg-review__avatar { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: var(--lg-r-pill); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em; color: var(--lg-ink); background: linear-gradient(150deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05)); border: 1px solid var(--lg-glass-border); } html[data-theme="light"] .lg .lg-review__avatar { background: linear-gradient(150deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.55)); } .lg .lg-review__name { font-size: 0.9375rem; font-weight: 600; line-height: 1.35; color: var(--lg-ink); } .lg .lg-review__role { font-size: 0.8125rem; color: var(--lg-ink-dim); } /* ========================================================================== 13. FAQ ========================================================================== */ .lg .lg-faq-layout { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); gap: clamp(24px, 4vw, 64px); align-items: start; } .lg .lg-faq-list { display: flex; flex-direction: column; gap: 12px; } /* legacy class names kept — main.js drives open/close via them */ .lg .lg-faq-list .lg-faq-item { border: 0; border-radius: var(--lg-r-md); background: var(--lg-glass-bg); box-shadow: var(--lg-inset), 0 18px 40px -30px rgba(0, 0, 0, 0.8); overflow: hidden; opacity: 1; transform: none; animation: none; transition: box-shadow 0.5s var(--lg-spring); } .lg .lg-faq-list .lg-faq-item::before { display: none; } .lg .lg-faq-list .lg-faq-item:hover { transform: none; } .lg .lg-faq-list .lg-faq-q { display: flex; align-items: center; justify-content: space-between; gap: var(--lg-3); width: 100%; padding: 21px var(--lg-3); font: inherit; color: inherit; text-align: left; background: none; border: 0; cursor: pointer; } .lg .lg-faq-list .lg-faq-item.active .lg-faq-q { background: none; } .lg .lg-faq-list .lg-faq-q h3 { flex: 1; font-family: var(--lg-font-display); font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.4; color: var(--lg-ink); margin: 0; } .lg .lg-faq-list .lg-faq-item.active .lg-faq-q h3 { color: var(--lg-ink); } .lg .lg-faq-list .lg-faq-icon { position: relative; display: block; width: 30px; height: 30px; flex: none; border-radius: var(--lg-r-pill); background: color-mix(in oklab, var(--lg-ink) 8%, transparent); border: 1px solid var(--lg-hairline); transition: transform 0.55s var(--lg-spring), background 0.35s var(--lg-ease); } .lg .lg-faq-list .lg-faq-icon::before, .lg .lg-faq-list .lg-faq-icon::after { content: ""; position: absolute; top: 50%; left: 50%; width: 11px; height: 1.5px; border-radius: 2px; background: var(--lg-ink); transform: translate(-50%, -50%); transition: transform 0.55s var(--lg-spring), opacity 0.3s var(--lg-ease); } .lg .lg-faq-list .lg-faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); } .lg .lg-faq-list .lg-faq-item.active .lg-faq-icon { background: var(--lg-accent); border-color: transparent; transform: rotate(180deg); } .lg .lg-faq-list .lg-faq-item.active .lg-faq-icon::before, .lg .lg-faq-list .lg-faq-item.active .lg-faq-icon::after { background: var(--lg-accent-ink); } .lg .lg-faq-list .lg-faq-item.active .lg-faq-icon::after { opacity: 0; } .lg .lg-faq-list .lg-faq-a { max-height: 0; overflow: hidden; padding: 0 var(--lg-3); transition: max-height 0.55s var(--lg-spring); } .lg .lg-faq-list .lg-faq-item.active .lg-faq-a { padding-bottom: 24px; } .lg .lg-faq-list .lg-faq-a p { margin: 0; padding-right: 46px; font-size: 0.9688rem; line-height: 1.68; color: var(--lg-ink-soft); } /* ========================================================================== 14. ABOUT / CONTACT ========================================================================== */ .lg .lg-about-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(24px, 4vw, 56px); align-items: start; } .lg .lg-about-copy { display: flex; flex-direction: column; gap: var(--lg-3); padding: var(--lg-6); border-radius: var(--lg-r-xl); } .lg .lg-about-copy p { margin: 0; color: var(--lg-ink-soft); max-width: 62ch; } .lg .lg-contact { display: flex; flex-direction: column; gap: var(--lg-3); padding: var(--lg-5); border-radius: var(--lg-r-xl); } .lg .lg-contact__row { display: flex; align-items: center; gap: 14px; } .lg .lg-contact__row .lg-icon { width: 40px; height: 40px; border-radius: 13px; } .lg .lg-contact__row .lg-icon svg { width: 19px; height: 19px; } .lg .lg-contact__label { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lg-ink-dim); } .lg .lg-contact__value { font-size: 0.9688rem; font-weight: 500; color: var(--lg-ink); text-decoration: none; word-break: break-word; } .lg .lg-contact__value:hover { color: var(--lg-accent-text); } /* ========================================================================== 15. FINAL CTA ========================================================================== */ .lg .lg-cta-panel { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: var(--lg-3); padding: clamp(48px, 6vw, 88px) clamp(24px, 5vw, 72px); border-radius: var(--lg-r-xl); text-align: center; } .lg .lg-cta-panel .lg-lead { max-width: 52ch; } .lg .lg-cta-panel__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--lg-2); margin-top: var(--lg-1); } .lg .lg-cta-panel__note { font-size: 0.875rem; color: var(--lg-ink-dim); } /* ========================================================================== 16. FOOTER + FLOATING BUTTONS ========================================================================== */ .lg .lg-cta { padding-bottom: clamp(40px, 4vw, 64px); } .lg .lg-footer { position: relative; margin-top: 0; padding: 0; background: none; color: var(--lg-ink-soft); border-top: 1px solid var(--lg-hairline); } .lg .lg-footer__inner { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: var(--lg-6) var(--lg-4); padding-block: var(--lg-8) var(--lg-6); } .lg .lg-footer h3 { font-family: var(--lg-font-body); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lg-ink-dim); margin: 0 0 var(--lg-2); } .lg .lg-footer__brand .logo { font-family: var(--lg-font-display); font-size: 1.125rem; font-weight: 600; letter-spacing: -0.03em; /* legacy .logo paints a violet gradient through -webkit-text-fill-color */ background: none; -webkit-text-fill-color: currentColor; color: var(--lg-ink); display: inline-flex; align-items: center; gap: 10px; margin-bottom: var(--lg-2); } .lg .lg-footer__brand p { margin: 0; font-size: 0.9375rem; line-height: 1.65; color: var(--lg-ink-dim); max-width: 38ch; } .lg .lg-footer__col h3 { margin-bottom: var(--lg-2); } .lg .lg-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .lg .lg-footer a { font-size: 0.9375rem; color: var(--lg-ink-soft); text-decoration: none; transition: color 0.3s var(--lg-ease); } .lg .lg-footer a:hover { color: var(--lg-accent-text); } .lg .lg-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--lg-2); padding-block: var(--lg-3) var(--lg-6); border-top: 1px solid var(--lg-hairline); font-size: 0.875rem; color: var(--lg-ink-dim); } .lg .lg-footer__legal { display: flex; flex-wrap: wrap; gap: var(--lg-2); } .lg .floating-buttons { position: fixed; right: clamp(16px, 3vw, 28px); bottom: clamp(16px, 3vw, 28px); display: flex; flex-direction: column; gap: 12px; z-index: 900; } .lg .float-btn { display: grid; place-items: center; width: 50px; height: 50px; border-radius: var(--lg-r-pill); border: 1px solid var(--lg-glass-border); color: var(--lg-ink); background: var(--lg-glass-bg); -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%); box-shadow: var(--lg-inset), 0 18px 36px -20px rgba(0, 0, 0, 0.75); cursor: pointer; transition: transform 0.5s var(--lg-spring), box-shadow 0.5s var(--lg-spring); } .lg .float-btn:hover { transform: translateY(-3px) scale(1.04); box-shadow: var(--lg-inset), 0 26px 48px -22px rgba(0, 0, 0, 0.8); } .lg .float-btn svg { width: 21px; height: 21px; } .lg .float-btn.whatsapp-btn { color: #4BD865; } /* ========================================================================== 17. ORDER PAGE RECONCILIATION #orderPage keeps its legacy markup, validation and portal integration — this is presentation only. The page follows the site theme like every other page (so it opens dark by default and the header toggle switches it), which means three things have to be handled: 1. the order-form palette is declared per theme in section 22; 2. the global heading rule is undone at id specificity, since `.lg h3` and `.form-section h3` tie and the newer sheet wins; 3. the legacy --primary-* variables are retinted per theme, because a handful of old rules still reference them. ========================================================================== */ html[data-theme="light"] body.lg { --primary-color: #0A8E7E; --secondary-color: #0B6E76; --primary-gradient: linear-gradient(135deg, #12A894 0%, #0B6E76 100%); } html[data-theme="dark"] body.lg { --primary-color: #35E0C4; --secondary-color: #5C9BFF; --primary-gradient: linear-gradient(135deg, #35E0C4 0%, #5C9BFF 100%); } /* The checkout view drops the marketing furniture */ body.lg.order-page .lg-footer, body.lg.order-page .floating-buttons { display: none; } /* Headings inside the order form keep the legacy treatment, not the display face and near-white colour the marketing page uses */ #orderPage h1, #orderPage h2, #orderPage h3, #orderPage h4, #orderPage h5 { font-family: var(--font-primary, sans-serif); font-weight: 600; line-height: 1.3; letter-spacing: normal; color: var(--ord-accent-text); } #orderPage .order-header h1, #orderPage .order-header p { color: #fff; } #orderPage label, #orderPage small, #orderPage li, #orderPage p { color: inherit; } /* ========================================================================== 18. LEGACY NEUTRALISERS A handful of old rules target elements the new markup still uses. Scoped overrides (never `!important`) keep them from leaking in. ========================================================================== */ .lg .human-badge { display: none; } /* ========================================================================== 19. RESPONSIVE ========================================================================== */ @media (max-width: 1080px) { .lg .lg-hero__grid { grid-template-columns: 1fr; gap: var(--lg-6); } .lg .lg-hero__copy { align-items: center; text-align: center; } .lg .lg-hero__title { max-width: 18ch; } .lg .lg-hero__lead { margin-inline: auto; } .lg .lg-hero__facts { justify-content: center; } .lg .lg-book-stage { --bw: 236px; --bh: 328px; --bd: 54px; } .lg .lg-coverage { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lg .lg-price-layout, .lg .lg-faq-layout, .lg .lg-about-layout, .lg .lg-split { grid-template-columns: 1fr; } .lg .lg-split__aside { position: static; } .lg .lg-reviews-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lg-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 992px) { .lg .mobile-menu-toggle { display: flex; order: 3; } .lg .nav-container { position: absolute; top: calc(100% + 10px); left: 0; right: 0; /* legacy sets height: calc(100vh - 80px) at this breakpoint */ height: auto; max-height: calc(100vh - 116px); overflow-y: auto; overscroll-behavior: contain; flex-direction: column; align-items: stretch; gap: var(--lg-2); padding: var(--lg-2); border-radius: var(--lg-r-lg); background: var(--lg-glass-bg-solid); -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%); border: 1px solid var(--lg-glass-border); box-shadow: var(--lg-inset), 0 30px 70px -30px rgba(0, 0, 0, 0.9); transform: translateY(-12px) scale(0.98); opacity: 0; visibility: hidden; transition: transform 0.5s var(--lg-spring), opacity 0.3s var(--lg-ease), visibility 0.3s var(--lg-ease); } .lg .nav-container.active { transform: translateY(0) scale(1); opacity: 1; visibility: visible; } .lg .nav-menu { flex-direction: column; align-items: stretch; gap: 2px; } .lg .nav-menu li { border: 0; } .lg .nav-menu a { padding: 13px 16px; border-radius: 14px; font-size: 1rem; } .lg .header-actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; padding: var(--lg-2) 4px 4px; border-top: 1px solid var(--lg-hairline); margin-top: 4px; } .lg .header-actions .order-nav { flex: 1; } .lg .login-btn { width: 100%; justify-content: center; border: 1px solid var(--lg-hairline); } .lg .header-actions .place-order-btn { flex-basis: 100%; justify-content: center; padding: 14px 22px; } } @media (max-width: 860px) { .lg .lg-hero__strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lg .lg-strip-cell { box-shadow: 1px 0 0 0 var(--lg-hairline), 0 1px 0 0 var(--lg-hairline); } .lg .lg-strip-cell:nth-child(2n) { box-shadow: 0 1px 0 0 var(--lg-hairline); } .lg .lg-strip-cell:nth-last-child(-n + 2) { box-shadow: 1px 0 0 0 var(--lg-hairline); } .lg .lg-strip-cell:last-child { box-shadow: none; } .lg-grid--3, .lg-grid--4, .lg-grid--2 { grid-template-columns: 1fr; } .lg .lg-reviews-grid { grid-template-columns: 1fr; } .lg .lg-coverage { grid-template-columns: 1fr; } } @media (max-width: 640px) { :root { --lg-section-y: 72px; } body.lg { font-size: 16.5px; } .lg .lg-header { padding-block: 10px; } .lg .lg-header__bar { padding: 8px 8px 8px 14px; } .lg .lg-header .logo { font-size: 1rem; min-width: 0; overflow: hidden; } .lg .lg-logo-mark { width: 26px; height: 26px; border-radius: 8px; } .lg .lg-hero { padding-top: 104px; padding-bottom: 48px; } .lg .lg-hero__grid { gap: var(--lg-4); } .lg .lg-hero__copy { gap: var(--lg-2); } .lg-display { font-size: clamp(2.05rem, 8.6vw, 2.5rem); } .lg .lg-hero__title { max-width: 100%; } .lg-lead { font-size: 1.0313rem; line-height: 1.6; } .lg .lg-btn { padding: 14px 24px; } .lg .lg-hero__facts { gap: 8px 18px; } .lg .lg-head { margin-bottom: var(--lg-5); } .lg .lg-book-stage { --bw: 200px; --bh: 278px; --bd: 50px; min-height: calc(var(--bh) + 120px); } .lg .book-mark { padding: 0 18px; gap: 13px; } .lg .book-seal { width: 74px; height: 74px; } .lg .book-seal__pct { font-size: 1.25rem; } .lg .book-seal__label { font-size: 0.5625rem; letter-spacing: 0.2em; } .lg .book-mark--back .book-mark__name { font-size: 1.1875rem; } .lg .book-spine__text { font-size: 0.8125rem; letter-spacing: 0.28em; } .lg .lg-book-shadow { width: 210px; height: 32px; } /* Trim GPU cost on small screens */ .lg .lg-field__bloom { filter: blur(76px); } .lg .lg-field__bloom--c { display: none; } .lg .lg-glass, .lg .lg-btn--ghost, .lg .float-btn, .lg .lg-chip { -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); } .lg .book-cover::after, .lg .book-back::after { animation-duration: 34s; } .lg .book { animation-duration: 34s; } .lg .lg-card, .lg .lg-feature-card, .lg .lg-service, .lg .lg-pledge, .lg .lg-review, .lg .lg-coverage__card { padding: var(--lg-3); } .lg .lg-step { flex-direction: row; padding: var(--lg-3); gap: var(--lg-2); } .lg .lg-faq-list .lg-faq-q { padding: 18px var(--lg-3); } .lg .lg-faq-list .lg-faq-a p { padding-right: 0; } .lg .lg-cta-panel { padding: var(--lg-6) var(--lg-3); } .lg .lg-about-copy, .lg .lg-contact, .lg .lg-price-panel { padding: var(--lg-4) var(--lg-3); } .lg .lg-btn { width: 100%; } .lg .lg-hero__actions { width: 100%; } .lg .lg-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--lg-5) var(--lg-3); } .lg .lg-footer__brand { grid-column: 1 / -1; } } @media (max-width: 400px) { .lg .lg-book-stage { --bw: 168px; --bh: 236px; --bd: 38px; } .lg .lg-hero__strip { grid-template-columns: 1fr; } .lg .lg-strip-cell { box-shadow: 0 1px 0 0 var(--lg-hairline); } .lg .lg-strip-cell:last-child { box-shadow: none; } .lg .lg-footer__inner { grid-template-columns: 1fr; } } /* ========================================================================== 20. REDUCED MOTION Freeze the book at a composed three-quarter angle rather than mid-tumble. ========================================================================== */ @media (prefers-reduced-motion: reduce) { .lg *, .lg *::before, .lg *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .lg .book { animation: none !important; transform: rotateY(-32deg); } .lg .lg-book-float { animation: none !important; transform: none; } .lg .lg-book-shadow { animation: none !important; opacity: 0.7; } .lg .lg-book-parallax { transform: rotateX(0) rotateY(0) !important; } .lg .book-cover::after, .lg .book-back::after { animation: none !important; background-position: 58% 0; } .lg .lg-field__bloom { animation: none !important; } } /* ========================================================================== 21. LEGAL / POLICY DOCUMENTS terms.html, privacy.html and educational-use.html. Those pages no longer load style.css, responsive.css or Font Awesome — this section owns them completely, so there is nothing to override. The three documents carry a lot of bespoke, one-off class names (.terms-section, .usage-item, .basis-icon, .restriction-notice …). Rather than style seventy of them, the rules below match on element type plus a handful of suffix selectors, so any block ending in -item, -grid or -notice is picked up whichever page it lives on. ========================================================================== */ .lg-doc-page .lg-doc-main { padding-top: clamp(112px, 11vw, 148px); padding-bottom: var(--lg-section-y); } /* ---- Document hero ------------------------------------------------------ */ .lg .lg-doc-hero { display: flex; flex-direction: column; align-items: flex-start; gap: var(--lg-2); max-width: 46rem; margin-bottom: var(--lg-5); } .lg .lg-doc-hero .lg-display { font-size: clamp(2.25rem, 4.4vw, 3.5rem); } .lg .lg-doc-updated { display: inline-flex; align-items: center; gap: 9px; margin: 4px 0 0; font-size: 0.875rem; color: var(--lg-ink-dim); } .lg .lg-doc-notice { margin: 0 0 clamp(40px, 5vw, 64px); padding: var(--lg-3) var(--lg-4); border-radius: var(--lg-r-md); font-size: 0.9688rem; line-height: 1.6; color: var(--lg-ink-soft); } .lg .lg-doc-notice strong { color: var(--lg-ink); } /* ---- Two-column layout with a sticky table of contents ------------------ */ .lg .lg-doc-layout { display: grid; grid-template-columns: minmax(0, 232px) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; } .lg .lg-doc-nav { position: sticky; top: 116px; max-height: calc(100vh - 150px); overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; } .lg .lg-doc-nav__title { display: block; margin-bottom: var(--lg-2); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lg-ink-dim); } .lg .lg-doc-nav ol { display: flex; flex-direction: column; gap: 1px; margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--lg-hairline); } .lg .lg-doc-nav a { display: block; padding: 8px 14px; margin-left: -1px; border-left: 1px solid transparent; font-size: 0.875rem; line-height: 1.45; color: var(--lg-ink-dim); text-decoration: none; transition: color 0.3s var(--lg-ease), border-color 0.3s var(--lg-ease); } .lg .lg-doc-nav a:hover { color: var(--lg-ink); } .lg .lg-doc-nav a.is-current { color: var(--lg-ink); font-weight: 500; border-left-color: var(--lg-accent); } /* ---- Prose -------------------------------------------------------------- */ .lg .lg-doc { display: flex; flex-direction: column; gap: var(--lg-3); } /* Panels fill the column; the reading measure is capped on the text itself so the right-hand side never opens up into a dead zone. */ .lg .lg-doc p, .lg .lg-doc li, .lg .lg-doc h2, .lg .lg-doc h3 { max-width: 68ch; } /* Every top-level block in a document becomes a glass panel */ .lg .lg-doc > section, .lg .lg-doc > div { padding: clamp(24px, 3vw, 40px); border-radius: var(--lg-r-lg); background: var(--lg-glass-inner), var(--lg-glass-bg); -webkit-backdrop-filter: var(--lg-glass-blur); backdrop-filter: var(--lg-glass-blur); box-shadow: var(--lg-inset), var(--lg-shadow); scroll-margin-top: 116px; } .lg .lg-doc h2 { margin: 0 0 var(--lg-2); font-size: clamp(1.375rem, 2vw, 1.625rem); line-height: 1.2; letter-spacing: -0.028em; color: var(--lg-ink); } .lg .lg-doc h3 { margin: var(--lg-3) 0 8px; font-size: 1.0625rem; line-height: 1.35; letter-spacing: -0.02em; color: var(--lg-ink); } .lg .lg-doc h4 { margin: var(--lg-2) 0 6px; font-family: var(--lg-font-body); font-size: 0.9375rem; font-weight: 600; letter-spacing: 0; color: var(--lg-ink); } .lg .lg-doc p { margin: 0 0 var(--lg-2); line-height: 1.75; color: var(--lg-ink-soft); text-wrap: pretty; } .lg .lg-doc p:last-child { margin-bottom: 0; } .lg .lg-doc strong { color: var(--lg-ink); font-weight: 600; } .lg .lg-doc a { color: var(--lg-accent-text); text-decoration: none; border-bottom: 1px solid color-mix(in oklab, var(--lg-accent) 40%, transparent); } .lg .lg-doc a:hover { border-bottom-color: var(--lg-accent); } .lg .lg-doc ul, .lg .lg-doc ol { display: flex; flex-direction: column; gap: 10px; margin: 0 0 var(--lg-2); padding: 0; list-style: none; } .lg .lg-doc ul:last-child, .lg .lg-doc ol:last-child { margin-bottom: 0; } .lg .lg-doc li { position: relative; padding-left: 22px; line-height: 1.7; color: var(--lg-ink-soft); text-wrap: pretty; } .lg .lg-doc li::before { content: ""; position: absolute; left: 2px; top: 0.72em; width: 6px; height: 6px; border-radius: 50%; background: color-mix(in oklab, var(--lg-accent) 70%, transparent); } .lg .lg-doc ol { counter-reset: lgdoc; } .lg .lg-doc ol > li { counter-increment: lgdoc; padding-left: 28px; } .lg .lg-doc ol > li::before { content: counter(lgdoc); top: 0; left: 0; width: auto; height: auto; border-radius: 0; background: none; font-size: 0.8125rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--lg-accent-text); } /* ---- Generic sub-blocks ------------------------------------------------- Suffix selectors so every one-off card/grid/callout across the three documents lands on the same treatment. */ .lg .lg-doc [class$="-grid"], .lg .lg-doc [class*="-grid "], .lg .lg-doc .data-types, .lg .lg-doc .restricted-list, .lg .lg-doc .steps-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(272px, 100%), 1fr)); gap: 12px; margin: var(--lg-2) 0; } .lg .lg-doc [class$="-item"], .lg .lg-doc [class*="-item "] { display: flex; flex-direction: column; gap: 6px; padding: var(--lg-2) var(--lg-3); border-radius: var(--lg-r-sm); background: color-mix(in oklab, var(--lg-ink) 6%, transparent); border: 1px solid var(--lg-hairline); } .lg .lg-doc [class$="-item"] h3, .lg .lg-doc [class$="-item"] h4 { margin-top: 0; } .lg .lg-doc [class$="-item"] p:last-child { margin-bottom: 0; } .lg .lg-doc [class$="-item"] > span { line-height: 1.6; color: var(--lg-ink-soft); } /* Callouts: important-notice, final-notice, restriction-notice, danger-zone … */ .lg .lg-doc [class$="-notice"], .lg .lg-doc .danger-zone, .lg .lg-doc .contact-section { border-color: color-mix(in oklab, var(--lg-accent) 34%, transparent); box-shadow: var(--lg-inset), var(--lg-shadow), inset 3px 0 0 0 var(--lg-accent); } .lg .lg-doc > [class$="-notice"], .lg .lg-doc > .danger-zone, .lg .lg-doc > .contact-section { border-left: 0; } .lg .lg-doc .data-tag { display: inline-block; margin-bottom: 6px; padding: 3px 10px; border-radius: var(--lg-r-pill); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--lg-accent-text); background: color-mix(in oklab, var(--lg-accent) 14%, transparent); } .lg .lg-doc .step-number { display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--lg-r-pill); font-size: 0.875rem; font-weight: 600; color: var(--lg-accent-ink); background: var(--lg-accent); } /* ---- Buttons that appear inside documents ------------------------------- */ .lg .lg-doc .btn-primary, .lg .lg-doc .btn-secondary, .lg .lg-doc .chat-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; margin-top: var(--lg-2); padding: 13px 26px; border: 0; border-radius: var(--lg-r-pill); font-family: var(--lg-font-body); font-size: 0.9375rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: transform 0.5s var(--lg-spring), box-shadow 0.5s var(--lg-spring); } .lg .lg-doc .btn-primary { color: var(--lg-accent-ink); background: linear-gradient(168deg, color-mix(in oklab, var(--lg-accent) 88%, white), var(--lg-accent) 60%, color-mix(in oklab, var(--lg-accent) 80%, var(--lg-accent-2))); box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.5), 0 14px 30px -16px color-mix(in oklab, var(--lg-accent) 62%, transparent); } .lg .lg-doc .btn-secondary, .lg .lg-doc .chat-button { color: var(--lg-ink); background: color-mix(in oklab, var(--lg-ink) 8%, transparent); border: 1px solid var(--lg-glass-border); } .lg .lg-doc .btn-primary:hover, .lg .lg-doc .btn-secondary:hover, .lg .lg-doc .chat-button:hover { transform: translateY(-2px); } .lg .lg-doc .policy-actions { display: flex; flex-wrap: wrap; gap: 12px; padding: 0; background: none; border: 0; box-shadow: none; } /* Current page marker in the header nav */ .lg .nav-menu a.is-current { color: var(--lg-ink); background: color-mix(in oklab, var(--lg-ink) 9%, transparent); } @media (max-width: 900px) { .lg .lg-doc-layout { grid-template-columns: 1fr; } .lg .lg-doc-nav { position: static; max-height: none; overflow: visible; padding: var(--lg-3); border-radius: var(--lg-r-md); background: var(--lg-glass-bg-solid); border: 1px solid var(--lg-glass-border); } .lg .lg-doc-nav ol { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); border-left: 0; /* a 15-section contents list would otherwise push the document a screen and a half down the page */ max-height: 232px; overflow-y: auto; overscroll-behavior: contain; } .lg .lg-doc-nav a { border-left: 0; padding: 7px 0; } .lg .lg-doc-nav a.is-current { border-left: 0; color: var(--lg-accent-text); } } /* ========================================================================== 22. ORDER FORM The form's markup, validation and portal integration are untouched — this is presentation only, scoped to #orderPage so it beats the legacy sheet on id specificity without any !important. ========================================================================== */ /* Dark is the default: the marketing site opens dark, and the checkout view follows it. The header toggle switches both. */ html[data-theme="dark"] body.lg { --ord-surface: rgba(255, 255, 255, 0.05); --ord-surface-solid: #111A2C; --ord-sunken: rgba(255, 255, 255, 0.035); --ord-line: rgba(255, 255, 255, 0.1); --ord-line-strong: rgba(255, 255, 255, 0.18); --ord-line-hover: rgba(255, 255, 255, 0.3); --ord-ink: #EAF1FF; --ord-ink-soft: #C6D3E7; --ord-ink-dim: #9DB0CA; --ord-placeholder: #7E90AB; --ord-accent: #35E0C4; --ord-accent-text: #35E0C4; --ord-accent-soft: rgba(53, 224, 196, 0.14); --ord-accent-line: rgba(53, 224, 196, 0.34); --ord-danger: #FF8FA3; --ord-btn-bg: linear-gradient(168deg, #6DEDD6 0%, #35E0C4 58%, #3FC8D8 100%); --ord-btn-ink: #04120F; --ord-btn-shadow: rgba(53, 224, 196, 0.5); --ord-banner: linear-gradient(128deg, #0B6E68 0%, #084C5C 55%, #07364B 100%); --ord-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%239DB0CA' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); --ord-radio-bg: rgba(255, 255, 255, 0.06); } html[data-theme="light"] body.lg { --ord-surface: #FFFFFF; --ord-surface-solid: #FFFFFF; --ord-sunken: #F4F7FB; --ord-line: #DEE6F0; --ord-line-strong: #C6D3E3; --ord-line-hover: #A8BACE; --ord-ink: #0E1A2B; --ord-ink-soft: #4B5D75; --ord-ink-dim: #56677F; /* #6B7C93 only reached 3.7:1 at 11-12px */ --ord-placeholder: #94A4B8; --ord-accent: #0A8E7E; --ord-accent-text: #076B5E; --ord-accent-soft: rgba(10, 142, 126, 0.12); --ord-accent-line: rgba(10, 142, 126, 0.28); --ord-danger: #C4384C; --ord-btn-bg: linear-gradient(150deg, #0A7A72 0%, #086C6D 52%, #07606A 100%); --ord-btn-ink: #FFFFFF; --ord-btn-shadow: rgba(8, 108, 109, 0.9); --ord-banner: linear-gradient(128deg, #0A7A72 0%, #086A6E 52%, #08566A 100%); --ord-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%234B5D75' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); --ord-radio-bg: #FFFFFF; } #orderPage { color: var(--ord-ink); } #orderPage .order-page { padding: clamp(96px, 11vw, 132px) 0 var(--lg-8); background: none; min-height: 100vh; } #orderPage .order-container { max-width: 880px; border-radius: 28px; background: var(--ord-surface-solid); border: 1px solid var(--ord-line); box-shadow: var(--lg-shadow); overflow: hidden; } html[data-theme="dark"] #orderPage .order-container { background: linear-gradient(168deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025)), linear-gradient(180deg, rgba(7, 13, 25, 0.72), rgba(7, 13, 25, 0.82)); -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%); box-shadow: var(--lg-inset), var(--lg-shadow); } /* ---- Banner ------------------------------------------------------------- */ #orderPage .order-header { position: relative; padding: clamp(32px, 5vw, 52px) clamp(24px, 5vw, 48px); text-align: left; background: var(--ord-banner); } #orderPage .order-header h1 { font-family: var(--lg-font-display); font-size: clamp(1.75rem, 3.4vw, 2.375rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1.1; margin: 0 0 8px; color: #fff; } #orderPage .order-header p { margin: 0; font-size: 1rem; color: rgba(255, 255, 255, 0.95); } #orderPage .order-form { padding: clamp(20px, 3vw, 28px) clamp(24px, 4vw, 36px) clamp(24px, 4vw, 36px); } /* ---- Service tabs: one segmented control -------------------------------- */ /* legacy paints this wrapper with a near-white gradient */ #orderPage .service-selection { /* sits between the banner and

, so it carries the form's gutters */ margin: 0; padding: clamp(20px, 3vw, 28px) clamp(24px, 4vw, 36px) 0; background: none; border-radius: 0; } #orderPage .service-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 5px; border-radius: var(--lg-r-pill); background: var(--ord-sunken); border: 1px solid var(--ord-line); } #orderPage .tab-btn { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px; border: 0; border-radius: var(--lg-r-pill); background: none; font-family: var(--lg-font-body); font-size: 0.9063rem; font-weight: 500; color: var(--ord-ink-soft); white-space: nowrap; cursor: pointer; transition: color 0.25s var(--lg-ease), background 0.25s var(--lg-ease), box-shadow 0.25s var(--lg-ease); } #orderPage .tab-btn:hover { color: var(--ord-ink); background: color-mix(in oklab, var(--ord-ink) 8%, transparent); } #orderPage .tab-btn.active { color: var(--ord-btn-ink); font-weight: 600; background: var(--ord-btn-bg); box-shadow: 0 8px 18px -10px var(--ord-btn-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.3); transform: none; } /* ---- Sections ----------------------------------------------------------- */ #orderPage .form-section { padding: clamp(20px, 3vw, 28px); margin-bottom: 18px; border-radius: 18px; background: var(--ord-surface); border: 1px solid var(--ord-line); box-shadow: 0 2px 8px -6px rgba(6, 16, 34, 0.2); transition: border-color 0.3s var(--lg-ease), box-shadow 0.3s var(--lg-ease); } #orderPage .form-section:hover { border-color: var(--ord-line-strong); } #orderPage .form-section h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 20px; padding: 0 0 0 12px; border: 0; border-left: 3px solid var(--ord-accent); font-family: var(--lg-font-display); font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.02em; color: var(--ord-ink); } #orderPage .form-section .form-section { margin: 20px 0 0; background: var(--ord-sunken); box-shadow: none; } #orderPage .form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 0 18px; } #orderPage .form-group { margin-bottom: 18px; } #orderPage .form-group.full-width { grid-column: 1 / -1; } #orderPage .form-group label { display: block; margin-bottom: 7px; font-size: 0.875rem; font-weight: 600; letter-spacing: -0.005em; color: var(--ord-ink); } #orderPage .form-group .required::after { content: "*"; margin-left: 4px; color: var(--ord-danger); } #orderPage .form-group small, #orderPage .form-hint { display: block; margin-top: 7px; font-size: 0.8125rem; line-height: 1.5; color: var(--ord-ink-dim); } /* ---- Controls ----------------------------------------------------------- */ #orderPage input[type="text"], #orderPage input[type="email"], #orderPage input[type="password"], #orderPage input[type="number"], #orderPage input[type="datetime-local"], #orderPage select, #orderPage textarea { -webkit-appearance: none; appearance: none; width: 100%; padding: 13px 16px; border-radius: 13px; border: 1px solid var(--ord-line-strong); background: var(--ord-surface); font-family: var(--lg-font-body); font-size: 16px; /* 16px stops iOS zooming on focus */ line-height: 1.5; color: var(--ord-ink); transition: border-color 0.2s var(--lg-ease), box-shadow 0.2s var(--lg-ease), background 0.2s var(--lg-ease); } #orderPage textarea { min-height: 120px; resize: vertical; } #orderPage select { padding-right: 46px; cursor: pointer; background-image: var(--ord-chevron); background-repeat: no-repeat; background-position: right 15px center; } #orderPage select:hover, #orderPage input:hover, #orderPage textarea:hover { border-color: var(--ord-line-hover); } #orderPage input:focus, #orderPage select:focus, #orderPage textarea:focus { outline: none; border-color: var(--ord-accent); box-shadow: 0 0 0 4px var(--ord-accent-soft); } #orderPage ::placeholder { color: var(--ord-placeholder); } #orderPage optgroup { font-family: var(--lg-font-body); font-weight: 600; color: var(--ord-ink-dim); } /* native dropdown popups are painted by the OS, so they need a solid pair */ #orderPage option, #orderPage optgroup { background-color: var(--ord-surface-solid); } #orderPage option { font-weight: 400; color: var(--ord-ink); } #orderPage .deadline-info { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 9px 14px; border-radius: 10px; font-size: 0.875rem; color: var(--ord-accent-text); background: var(--ord-accent-soft); border: 0; } /* ---- File upload -------------------------------------------------------- */ #orderPage .file-upload { padding: 30px 20px; border-radius: 16px; border: 1.5px dashed var(--ord-line-strong); background: var(--ord-sunken); text-align: center; cursor: pointer; transition: border-color 0.25s var(--lg-ease), background 0.25s var(--lg-ease); } #orderPage .file-upload:hover, #orderPage .file-upload.dragover { border-color: var(--ord-accent); background: var(--ord-accent-soft); } #orderPage .file-upload p { margin: 0 0 4px; font-weight: 600; color: var(--ord-ink); } /* ---- Checkboxes (AI automation form) ------------------------------------ */ #orderPage .checkbox-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 10px; } #orderPage .checkbox-item { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--ord-line); background: var(--ord-surface); font-size: 0.9063rem; color: var(--ord-ink-soft); cursor: pointer; transition: border-color 0.2s var(--lg-ease), background 0.2s var(--lg-ease); } #orderPage .checkbox-item:hover { border-color: var(--ord-line-strong); } #orderPage .checkbox-item input[type="checkbox"] { width: 18px; height: 18px; flex: none; accent-color: var(--ord-accent); cursor: pointer; } #orderPage .checkbox-item .checkmark { display: none; } /* ---- Price -------------------------------------------------------------- */ #orderPage .price-display { padding: 26px; margin: 22px 0; border-radius: 20px; text-align: center; color: #fff; background: var(--ord-banner); box-shadow: 0 20px 40px -26px rgba(6, 40, 52, 0.7); } #orderPage .price-amount { font-family: var(--lg-font-display); font-size: clamp(2rem, 4.4vw, 2.75rem); font-weight: 600; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; line-height: 1.05; } #orderPage .price-breakdown { margin-top: 6px; font-size: 0.9063rem; color: rgba(255, 255, 255, 0.95); } /* ---- Payment options as selectable cards -------------------------------- */ #orderPage .payment-amount-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 12px; } #orderPage .payment-option { position: relative; } #orderPage .payment-option input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; } #orderPage .payment-option label { display: block; height: 100%; padding: 18px 18px 18px 46px; text-align: left; border-radius: 16px; border: 1.5px solid var(--ord-line); background: var(--ord-sunken); font-size: 0.875rem; color: var(--ord-ink-soft); cursor: pointer; transition: border-color 0.25s var(--lg-ease), background 0.25s var(--lg-ease), box-shadow 0.25s var(--lg-ease); } #orderPage .payment-option label::before { content: ""; position: absolute; left: 18px; top: 20px; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--ord-line-strong); background: var(--ord-radio-bg); transition: border-color 0.25s var(--lg-ease), box-shadow 0.25s var(--lg-ease); } #orderPage .payment-option label strong { display: block; margin-bottom: 2px; font-family: var(--lg-font-display); font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.02em; color: var(--ord-ink); } #orderPage .payment-option label small { color: var(--ord-ink-dim); } #orderPage .payment-option .amount-display { display: block; margin-top: 10px; font-family: var(--lg-font-display); font-size: 1.25rem; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--ord-accent-text); } #orderPage .payment-option:hover label { border-color: var(--ord-line-strong); } #orderPage .payment-option input[type="radio"]:checked + label { border-color: var(--ord-accent); background: var(--ord-accent-soft); box-shadow: 0 0 0 3px var(--ord-accent-soft); transform: none; } #orderPage .payment-option input[type="radio"]:checked + label::before { border-color: var(--ord-accent); box-shadow: inset 0 0 0 4px var(--ord-accent); } #orderPage .payment-option input[type="radio"]:focus-visible + label { outline: 2px solid var(--ord-accent); outline-offset: 3px; } /* order.js writes into this node; collapse it while it is still empty */ #orderPage #paymentSummary:empty { display: none; } #orderPage #paymentSummary { background: var(--ord-sunken) !important; border-radius: 14px !important; border: 1px solid var(--ord-line); color: var(--ord-ink-soft); font-size: 0.9063rem; } /* ---- Footer of the form ------------------------------------------------- */ #orderPage .security-badge { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 13px 18px; margin: 22px 0; border-radius: 14px; font-size: 0.875rem; color: var(--ord-accent-text); background: var(--ord-accent-soft); border: 1px solid var(--ord-accent-line); } #orderPage .complete-order-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 17px 28px; border: 0; border-radius: var(--lg-r-pill); font-family: var(--lg-font-body); font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; text-transform: none; color: var(--ord-btn-ink); background: var(--ord-btn-bg); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 18px 34px -18px var(--ord-btn-shadow); cursor: pointer; transition: transform 0.45s var(--lg-spring), box-shadow 0.45s var(--lg-spring); } #orderPage .complete-order-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.36), 0 24px 44px -20px var(--ord-btn-shadow); } #orderPage .complete-order-btn:disabled { opacity: 0.55; cursor: not-allowed; } /* ---- Tutoring "how it works" inside the form ---------------------------- */ #orderPage .tutoring-steps { margin-top: 22px; } #orderPage .steps-container-tutoring { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 12px; } #orderPage .steps-container-tutoring .step { display: flex; gap: 12px; padding: 14px; border-radius: 14px; background: var(--ord-sunken); border: 1px solid var(--ord-line); } #orderPage .steps-container-tutoring .step-number { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; font-size: 0.8125rem; font-weight: 600; color: var(--ord-btn-ink); background: var(--ord-btn-bg); } #orderPage .steps-container-tutoring h5 { margin: 0 0 3px; font-size: 0.9063rem; font-weight: 600; color: var(--ord-ink); } #orderPage .steps-container-tutoring p { margin: 0; font-size: 0.8125rem; line-height: 1.5; color: var(--ord-ink-dim); } /* ---- The header log-in action is the only CTA on this page -------------- */ body.lg.order-page .login-btn { padding: 11px 24px; border-radius: var(--lg-r-pill); font-size: 0.9375rem; font-weight: 600; color: var(--ord-btn-ink); background: var(--ord-btn-bg); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 12px 26px -14px var(--ord-btn-shadow); } body.lg.order-page .login-btn:hover { color: var(--ord-btn-ink); transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34), 0 18px 34px -16px var(--ord-btn-shadow); } @media (max-width: 640px) { #orderPage .order-container { border-radius: 20px; margin-inline: 4px; } #orderPage .service-tabs { border-radius: 18px; } #orderPage .tab-btn { flex: 1 1 45%; } }