/* ========================================================================== MY-Card — Editorial design system ("Paper & Ink") Scoped to . Pages opt in by adding the class and overriding base.html's {% block legacy_css %} to drop Tailwind/Bootstrap. Light "paper" is the brand default; dark "ink" is opt-in via (persisted in localStorage 'ed-theme'). ========================================================================== */ .ed { /* ---- Surfaces ---- */ --paper: #F5F2EB; /* ivory */ --paper-2: #ECE7DC; --surface: #FBFAF6; --ink: #10131A; /* near-black, cool */ --ink-2: #454953; --ink-3: #767A84; --rule: rgba(16, 19, 26, 0.13); --rule-2: rgba(16, 19, 26, 0.07); /* ---- Brand: Midnight & Brass ---- */ --brand: #16243D; /* midnight navy — primary actions, featured surfaces */ --brand-deep: #0D1729; /* deep bands, featured plan */ --on-brand: #F5F2EB; --tint: #EDE4D1; /* brass-washed ivory for icon wells, highlights */ --accent: #96702F; /* brushed brass — italics, numerals, stamps */ /* ---- Type ---- */ --serif: 'Fraunces', 'Noto Serif Bengali', Georgia, 'Times New Roman', serif; --sans: 'Geist', 'Hind Siliguri', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --mono: 'Geist Mono', 'Hind Siliguri', ui-monospace, 'SF Mono', Menlo, monospace; /* ---- Layout ---- */ --wrap: 1240px; --gutter: clamp(20px, 4vw, 48px); --section: clamp(88px, 11vw, 148px); --radius: 14px; --radius-sm: 8px; --ease: cubic-bezier(0.22, 1, 0.36, 1); /* ---- Elevation (warm, soft — never glow) ---- */ --lift-1: 0 1px 2px rgba(40, 32, 12, 0.06), 0 2px 6px rgba(40, 32, 12, 0.05); --lift-2: 0 2px 4px rgba(40, 32, 12, 0.05), 0 12px 28px -8px rgba(40, 32, 12, 0.16); --lift-3: 0 3px 6px rgba(40, 32, 12, 0.06), 0 30px 60px -20px rgba(40, 32, 12, 0.32), 0 60px 90px -40px rgba(40, 32, 12, 0.22); /* Legacy mc-* tokens used by global chrome (toasts, language pill) */ --mc-bg-1: var(--surface); --mc-bg-3: var(--paper-2); --mc-text-hi: var(--ink); --mc-text-md: var(--ink-2); --mc-text-inv: var(--on-brand); --mc-accent: var(--brand); --mc-accent-strong: var(--brand); --mc-border-hi: var(--rule); --mc-font-body: var(--sans); background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.6; font-feature-settings: 'ss01', 'cv11'; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; margin: 0; overflow-x: hidden; overflow-x: clip; } /* Entrance animations translate/rotate cards in from off-canvas; never let that create a sideways scroll on phones. */ html.ed-html { overflow-x: clip; } html[data-ed-theme="dark"] .ed { --paper: #0A0E16; --paper-2: #10151F; --surface: #121826; --ink: #EDE9E0; --ink-2: #B4B7C0; --ink-3: #868A95; --rule: rgba(237, 233, 224, 0.13); --rule-2: rgba(237, 233, 224, 0.06); --brand: #D8B878; /* brass becomes the primary on midnight */ --brand-deep: #060A11; --on-brand: #0A0E16; --tint: rgba(216, 184, 120, 0.12); --accent: #D8B878; --lift-1: 0 1px 2px rgba(0, 0, 0, 0.4); --lift-2: 0 12px 28px -8px rgba(0, 0, 0, 0.6); --lift-3: 0 30px 60px -20px rgba(0, 0, 0, 0.7), 0 60px 90px -40px rgba(0, 0, 0, 0.5); } html[data-ed-theme="dark"] { color-scheme: dark; } html:not([data-ed-theme="dark"]) { color-scheme: light; } /* Fine paper grain — a fixed, very low-contrast noise layer */ .ed::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: 0.35; transform: translateZ(0); background-image: url("data:image/svg+xml;utf8,"); } html[data-ed-theme="dark"] .ed::before { opacity: 0.12; } /* Resets use :where() so they carry zero specificity and never beat component classes */ :where(.ed) *, :where(.ed) *::before, :where(.ed) *::after { box-sizing: border-box; } :where(.ed) img { max-width: 100%; display: block; } :where(.ed) a { color: inherit; text-decoration: none; } :where(.ed) button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } :where(.ed) :is(h1, h2, h3, h4, h5, p, ul, ol, figure, blockquote) { margin: 0; padding: 0; color: inherit; } :where(.ed) :is(ul, ol) { list-style: none; } .ed ::selection { background: var(--brand); color: var(--on-brand); } .ed :focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; } .ed [data-lucide], .ed svg.lucide { width: 1em; height: 1em; stroke-width: 1.6; flex-shrink: 0; } /* ---------- Layout primitives ---------- */ .ed-wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); position: relative; z-index: 2; } .ed-section { padding: var(--section) 0; position: relative; border-top: 1px solid var(--rule); } .ed-section--flush { border-top: 0; } .ed-section--tint { background: var(--paper-2); } .ed-section--deep { background: #0D1729; color: #EDE9E0; border-top: 0; --ink: #F2EEE5; --ink-2: #BCC0CB; --ink-3: #8C93A3; --rule: rgba(242, 238, 229, 0.14); --rule-2: rgba(242, 238, 229, 0.07); --brand: #D8B878; --on-brand: #0D1729; --tint: rgba(216, 184, 120, 0.12); --accent: #D8B878; } html[data-ed-theme="dark"] .ed-section--deep { background: #060A11; } /* ---------- Type ---------- */ .ed-display { font-family: var(--serif); font-weight: 380; font-variation-settings: 'opsz' 144, 'SOFT' 0, 'WONK' 0; font-size: clamp(3rem, 7.4vw, 6.6rem); line-height: 0.98; letter-spacing: -0.035em; color: var(--ink); } .ed-display em, .ed-h2 em, .ed-h3 em { font-style: italic; font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1; color: var(--accent); } .ed-h2 { font-family: var(--serif); font-weight: 380; font-variation-settings: 'opsz' 96, 'SOFT' 0; font-size: clamp(2.1rem, 4.4vw, 3.7rem); line-height: 1.04; letter-spacing: -0.028em; text-wrap: balance; color: var(--ink); } .ed-h3 { font-family: var(--serif); font-weight: 450; font-variation-settings: 'opsz' 36; font-size: 1.45rem; line-height: 1.2; letter-spacing: -0.012em; color: var(--ink); } .ed-lede { font-size: clamp(1.08rem, 1.5vw, 1.24rem); line-height: 1.6; color: var(--ink-2); max-width: 36em; text-wrap: pretty; } .ed-body { color: var(--ink-2); text-wrap: pretty; } .ed-small { font-size: 0.9rem; color: var(--ink-3); } .ed-mono { font-family: var(--mono); font-feature-settings: 'tnum', 'zero'; } /* Section label: "01 — Our mission" */ .ed-kicker { display: inline-flex; align-items: center; gap: 0.75rem; font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); } .ed-kicker__n { color: var(--accent); } .ed-kicker::after { content: ''; width: 2.5rem; height: 1px; background: currentColor; opacity: 0.5; } .ed-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: clamp(24px, 5vw, 80px); align-items: end; margin-bottom: clamp(48px, 7vw, 88px); } .ed-head > div { display: grid; gap: 1.25rem; } .ed-head--stack { grid-template-columns: 1fr; max-width: 820px; } .ed-head--center { grid-template-columns: 1fr; text-align: center; justify-items: center; max-width: 820px; margin-left: auto; margin-right: auto; } .ed-head--center .ed-kicker::after { display: none; } .ed-head--center .ed-lede { margin: 0 auto; } /* ---------- Buttons ---------- */ .ed-btn { --b-bg: transparent; --b-fg: var(--ink); --b-bd: var(--rule); display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; height: 50px; padding: 0 1.4rem; border-radius: 999px; border: 1px solid var(--b-bd); background: var(--b-bg); color: var(--b-fg); font-family: var(--sans); font-weight: 520; font-size: 0.98rem; letter-spacing: -0.005em; white-space: nowrap; transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease); } .ed-btn:hover { --b-bd: var(--ink); } .ed-btn:active { transform: translateY(1px); } .ed-btn--primary { --b-bg: var(--brand); --b-fg: var(--on-brand); --b-bd: var(--brand); } .ed-btn--primary:hover { --b-bg: var(--ink); --b-bd: var(--ink); --b-fg: var(--paper); } .ed-btn--ink { --b-bg: var(--ink); --b-fg: var(--paper); --b-bd: var(--ink); } .ed-btn--ink:hover { --b-bg: var(--brand); --b-bd: var(--brand); --b-fg: var(--on-brand); } .ed-btn--sm { height: 40px; padding: 0 1rem; font-size: 0.9rem; } .ed-btn--block { width: 100%; } .ed-btn .ed-arrow { transition: transform 0.3s var(--ease); } .ed-btn:hover .ed-arrow { transform: translateX(3px); } .ed-link { justify-self: start; display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 520; color: var(--ink); background-image: linear-gradient(currentColor, currentColor); background-size: 100% 1px; background-position: 0 100%; background-repeat: no-repeat; padding-bottom: 2px; transition: background-size 0.35s var(--ease), color 0.2s; } .ed-link:hover { background-size: 0 1px; background-position: 100% 100%; color: var(--brand); } /* ---------- Tag / chip ---------- */ .ed-tag { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.3rem 0.7rem; border: 1px solid var(--rule); border-radius: 999px; font-size: 0.8rem; color: var(--ink-2); background: color-mix(in oklab, var(--surface) 70%, transparent); } .ed-tag--tint { background: var(--tint); border-color: transparent; color: var(--brand); } .ed-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; } /* ---------- Nav ---------- */ .ed-nav { position: sticky; top: 0; z-index: 100; background: color-mix(in oklab, var(--paper) 86%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: border-color 0.3s; } .ed-nav.is-scrolled { border-bottom-color: var(--rule); } .ed-nav__inner { display: flex; align-items: center; gap: 2rem; height: 72px; } .ed-brand { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--serif); font-size: 1.35rem; font-weight: 500; letter-spacing: -0.02em; color: var(--ink); font-variation-settings: 'opsz' 48; } .ed-brand__mark { width: 26px; height: 26px; color: var(--brand); } .ed-nav__links { display: flex; gap: 1.9rem; margin-left: auto; font-size: 0.93rem; color: var(--ink-2); } .ed-nav__links a { position: relative; transition: color 0.2s; } .ed-nav__links a:hover { color: var(--ink); } .ed-nav__actions { display: flex; align-items: center; gap: 0.6rem; } .ed-iconbtn { width: 40px; height: 40px; border-radius: 50%; display: inline-grid; place-items: center; border: 1px solid var(--rule); color: var(--ink-2); transition: color 0.2s, border-color 0.2s; } .ed-iconbtn:hover { color: var(--ink); border-color: var(--ink); } .ed-iconbtn [data-lucide], .ed-iconbtn svg { width: 17px; height: 17px; } .ed-nav__menu { display: none; } .ed-drawer { display: none; } @media (max-width: 980px) { .ed-nav__links, .ed-nav__actions .ed-hide-m { display: none; } .ed-nav__actions { margin-left: auto; } .ed-nav__menu { display: inline-grid; } .ed-drawer { display: block; position: fixed; inset: 72px 0 auto 0; z-index: 99; background: var(--paper); border-bottom: 1px solid var(--rule); padding: 12px var(--gutter) 28px; transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s; } .ed-drawer.is-open { transform: none; opacity: 1; visibility: visible; } .ed-drawer a:not(.ed-btn) { display: block; padding: 14px 0; border-bottom: 1px solid var(--rule-2); font-family: var(--serif); font-size: 1.4rem; } .ed-drawer__cta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; } } /* ---------- Hero ---------- */ .ed-hero { padding: clamp(48px, 7vw, 96px) 0 clamp(64px, 8vw, 112px); position: relative; } .ed-hero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(40px, 6vw, 96px); align-items: center; } .ed-hero__copy { display: grid; gap: 1.8rem; align-content: start; } .ed-hero__meta { display: flex; flex-wrap: wrap; gap: 0.5rem; } .ed-hero__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; } .ed-hero__proof { display: flex; flex-wrap: wrap; gap: 0.35rem 1.4rem; font-size: 0.88rem; color: var(--ink-3); } .ed-hero__proof li { display: inline-flex; align-items: center; gap: 0.45rem; } .ed-hero__proof [data-lucide], .ed-hero__proof svg { color: var(--brand); } .ed-strike { position: relative; white-space: nowrap; } .ed-strike--off::after { display: none; } .ed-strike::after { content: ''; position: absolute; left: -2%; right: -2%; top: 55%; height: 0.07em; background: var(--accent); transform: rotate(-3deg) scaleX(0); transform-origin: left; animation: edStrike 0.9s 0.9s var(--ease) forwards; } @keyframes edStrike { to { transform: rotate(-3deg) scaleX(1); } } /* Card stage — physical ID-1 card objects */ .ed-stage { position: relative; aspect-ratio: 1 / 1.02; max-width: 560px; justify-self: center; width: 100%; } .ed-stage__plate { position: absolute; inset: 6% 2% 10% 6%; border-radius: 22px; background: repeating-linear-gradient(90deg, var(--rule-2) 0 1px, transparent 1px 28px), repeating-linear-gradient(0deg, var(--rule-2) 0 1px, transparent 1px 28px); mask-image: radial-gradient(closest-side, #000 55%, transparent); -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent); } .ed-idcard { --c-bg: linear-gradient(150deg, #1B2B47 0%, #0D1729 70%); --c-fg: #F2EEE5; --c-mute: rgba(242, 238, 229, 0.6); --c-acc: #D8B878; position: absolute; width: 78%; aspect-ratio: 85.6 / 54; border-radius: clamp(10px, 1.6vw, 16px); background: var(--c-bg); color: var(--c-fg); box-shadow: var(--lift-3); padding: clamp(14px, 2.4vw, 26px); display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; transition: transform 0.8s var(--ease); } .ed-idcard::after { /* subtle cotton-stock texture */ content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255,255,255,0.07), transparent 40%, rgba(0,0,0,0.08)); } .ed-idcard--back { --c-bg: #FBFAF6; --c-fg: #10131A; --c-mute: #6E727C; --c-acc: #96702F; top: 4%; right: 0; } .ed-idcard--front { bottom: 12%; left: 0; z-index: 2; } /* Hero cards: tilt (--rx/--ry from pointer) + parallax (--sy from scroll), set on .ed-stage by JS */ .ed-stage .ed-idcard--front { transform: translate3d(0, calc(var(--sy, 0) * -56px), 0) perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) rotate(-5deg); } .ed-stage .ed-idcard--back { transform: translate3d(0, calc(var(--sy, 0) * 36px), 0) perspective(1200px) rotateX(calc(var(--rx, 0deg) * 0.6)) rotateY(calc(var(--ry, 0deg) * 0.6)) rotate(7deg); } .ed-stage .ed-idcard { transition: transform 0.7s var(--ease), opacity 0.9s var(--ease); } .ed-stage .ed-idcard--front::before { /* moving sheen that follows the tilt */ content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1; background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.13) 48%, transparent 62%); background-size: 260% 100%; background-position: calc(50% + var(--shx, 0%)) 0; transition: background-position 0.7s var(--ease); } .ed-idcard__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; } .ed-idcard__brand { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--serif); font-size: clamp(0.72rem, 1.1vw, 0.9rem); letter-spacing: -0.01em; color: var(--c-mute); } .ed-idcard__brand svg { width: 14px; height: 14px; color: var(--c-acc); } .ed-idcard__avatar { width: clamp(38px, 5vw, 54px); height: clamp(38px, 5vw, 54px); border-radius: 50%; overflow: hidden; border: 1.5px solid rgba(216, 184, 120, 0.55); display: grid; place-items: center; font-family: var(--serif); background: rgba(255,255,255,0.08); } .ed-idcard__avatar img { width: 100%; height: 100%; object-fit: cover; } .ed-idcard__name { color: var(--c-fg); font-family: var(--serif); font-weight: 400; font-size: clamp(1.15rem, 2.3vw, 1.9rem); line-height: 1.05; letter-spacing: -0.02em; font-variation-settings: 'opsz' 72; } .ed-idcard__role { font-size: clamp(0.66rem, 1vw, 0.82rem); color: var(--c-mute); margin-top: 0.35rem; } .ed-idcard__role strong { color: var(--c-acc); font-weight: 500; } .ed-idcard__foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 0.8rem; font-family: var(--mono); font-size: clamp(0.55rem, 0.85vw, 0.7rem); color: var(--c-mute); letter-spacing: 0.02em; } .ed-idcard__foot span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ed-idcard__qr { width: 40%; aspect-ratio: 1; background: #fff; border-radius: 6px; padding: 5px; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06); display: grid; place-items: center; } .ed-idcard__qr img { width: 100%; height: 100%; image-rendering: pixelated; } .ed-idcard__back-body { display: flex; gap: 1rem; align-items: center; flex: 1; } .ed-idcard__back-copy { font-size: clamp(0.62rem, 0.95vw, 0.8rem); color: var(--c-mute); line-height: 1.45; } .ed-idcard__back-copy strong { display: block; font-family: var(--serif); font-weight: 450; font-size: clamp(0.85rem, 1.4vw, 1.12rem); color: var(--c-fg); margin-bottom: 0.25rem; letter-spacing: -0.01em; } .ed-stage__caption { position: absolute; left: 6%; bottom: 0; right: 6%; display: flex; flex-wrap: wrap; gap: 0.3rem 0.8rem; align-items: baseline; font-size: 0.82rem; color: var(--ink-3); border-top: 1px solid var(--rule); padding-top: 0.7rem; } .ed-stage__caption a { white-space: nowrap; } .ed-stage__caption b { white-space: nowrap; font-family: var(--mono); font-weight: 500; color: var(--ink); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; } .ed-stage__caption a { margin-left: auto; } .ed-stamp { position: absolute; top: 0; left: 4%; z-index: 3; width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; text-align: center; border: 1px dashed color-mix(in oklab, var(--accent) 70%, transparent); color: var(--accent); font-family: var(--mono); font-size: 0.6rem; line-height: 1.3; letter-spacing: 0.1em; text-transform: uppercase; transform: rotate(-12deg); background: color-mix(in oklab, var(--paper) 85%, transparent); } .ed-stamp strong { display: block; font-family: var(--serif); font-size: 1.5rem; letter-spacing: -0.02em; text-transform: none; font-weight: 450; } /* ---------- Stats row ---------- */ .ed-stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .ed-stat { padding: 28px 24px 26px; display: grid; gap: 0.35rem; align-content: start; border-left: 1px solid var(--rule); } .ed-stat:first-child { border-left: 0; padding-left: 0; } .ed-stat__num { font-family: var(--serif); font-weight: 380; font-size: clamp(2.2rem, 4vw, 3.3rem); letter-spacing: -0.03em; line-height: 1; font-variation-settings: 'opsz' 144; } .ed-stat__num small { font-size: 0.45em; letter-spacing: 0; color: var(--ink-3); margin-left: 0.15em; } .ed-stat__label { font-size: 0.86rem; color: var(--ink-3); } .ed-stats__note { display: flex; align-items: center; gap: 0.55rem; margin-top: 14px; font-size: 0.84rem; color: var(--ink-3); } .ed-stats__note .ed-dot { color: #2F7A4F; animation: edPulse 2s ease-in-out infinite; } @keyframes edPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } .ed-ticker { overflow: hidden; border-bottom: 1px solid var(--rule); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); } .ed-ticker__track { display: flex; width: max-content; gap: 3rem; padding: 18px 0; animation: edTicker 48s linear infinite; font-family: var(--serif); font-style: italic; font-size: 1.12rem; color: var(--ink-2); } .ed-ticker__track span { display: inline-flex; align-items: center; gap: 3rem; white-space: nowrap; } .ed-ticker__track span::after { content: '✳'; font-style: normal; color: var(--brand); font-size: 0.8rem; } @keyframes edTicker { to { transform: translateX(-50%); } } /* ---------- Mission ---------- */ .ed-mission { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 120px); } .ed-mission__quote { font-family: var(--serif); font-size: clamp(1.5rem, 2.4vw, 2.05rem); line-height: 1.28; letter-spacing: -0.015em; font-weight: 380; font-variation-settings: 'opsz' 60; text-wrap: pretty; } .ed-mission__sign { margin-top: 2rem; display: flex; align-items: center; gap: 0.8rem; font-family: var(--serif); font-style: italic; color: var(--accent); font-size: 1.15rem; } .ed-mission__sign::before { content: ''; width: 36px; height: 1px; background: currentColor; } .ed-sdg-title { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); display: flex; justify-content: space-between; gap: 1rem; padding-bottom: 14px; border-bottom: 1px solid var(--ink); } .ed-sdg { display: grid; grid-template-columns: 52px 1fr; gap: 1.1rem; padding: 20px 0; border-bottom: 1px solid var(--rule); align-items: start; } .ed-sdg__n { width: 52px; height: 52px; display: grid; place-items: center; background: var(--sdg); color: #fff; font-family: var(--sans); font-weight: 700; font-size: 1.2rem; border-radius: 4px; } .ed-sdg h4 { font-family: var(--serif); font-weight: 450; font-size: 1.15rem; letter-spacing: -0.01em; margin-bottom: 0.2rem; } .ed-sdg p { font-size: 0.93rem; color: var(--ink-2); } .ed-sdg--minor { grid-template-columns: 34px 1fr; padding: 14px 0; } .ed-sdg--minor .ed-sdg__n { width: 34px; height: 34px; font-size: 0.85rem; } .ed-sdg--minor h4 { font-size: 1rem; margin: 0.25rem 0 0; } .ed-sdg--minor p { display: none; } .ed-sdg-sub { padding-bottom: 6px; margin-top: 26px; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); } /* ---------- How it works ---------- */ .ed-steps { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); } .ed-step { padding: 28px clamp(18px, 2.4vw, 36px) 8px 0; display: grid; gap: 1rem; align-content: start; } .ed-step + .ed-step { padding-left: clamp(18px, 2.4vw, 36px); border-left: 1px solid var(--rule); } .ed-step__n { font-family: var(--serif); font-size: 4rem; line-height: 1; font-weight: 300; color: var(--accent); letter-spacing: -0.04em; font-variation-settings: 'opsz' 144; } .ed-step__eyebrow { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); } .ed-step__meta { display: flex; flex-wrap: wrap; gap: 0.4rem; } .ed-vignette { margin-top: 0.6rem; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 18px; box-shadow: var(--lift-1); min-height: 176px; } .ed-field { display: grid; gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--rule-2); } .ed-field span:first-child { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); } .ed-field span:last-child { font-size: 0.95rem; } .ed-note { margin-top: 10px; display: inline-flex; gap: 0.45rem; align-items: center; font-size: 0.8rem; color: var(--brand); } .ed-swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .ed-swatch { aspect-ratio: 85.6 / 54; border-radius: 6px; box-shadow: var(--lift-1); position: relative; } .ed-swatch.is-on { outline: 2px solid var(--brand); outline-offset: 3px; } .ed-sharebox { display: grid; gap: 14px; } .ed-sharebox__url { display: flex; align-items: center; gap: 0.5rem; font-family: var(--mono); font-size: 0.82rem; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 999px; background: var(--paper); } .ed-sharebox__nums { display: grid; grid-template-columns: 1fr 1fr; } .ed-sharebox__nums div { padding: 4px 0; } .ed-sharebox__nums div + div { border-left: 1px solid var(--rule); padding-left: 14px; } .ed-sharebox__nums strong { display: block; font-family: var(--serif); font-size: 2rem; font-weight: 400; letter-spacing: -0.03em; line-height: 1.1; } .ed-sharebox__nums span { font-size: 0.8rem; color: var(--ink-3); } .ed-steps-cta { margin-top: 56px; display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; align-items: center; } /* ---------- Scanner (deep band) ---------- */ .ed-scan { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 110px); align-items: center; } .ed-scan__copy { display: grid; gap: 1.5rem; } .ed-checks { display: grid; gap: 0; border-top: 1px solid var(--rule); } .ed-checks li { display: flex; gap: 0.8rem; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--rule); color: var(--ink-2); font-size: 0.97rem; } .ed-checks [data-lucide], .ed-checks svg { color: var(--brand); width: 18px; height: 18px; } .ed-scan__visual { position: relative; display: grid; gap: 18px; } .ed-viewfinder { position: relative; aspect-ratio: 4 / 3; border-radius: 20px; background: radial-gradient(120% 90% at 30% 20%, #22365A, #0A1322); overflow: hidden; display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08); } .ed-viewfinder__corners { position: absolute; inset: 12%; } .ed-viewfinder__corners::before, .ed-viewfinder__corners::after { content: ''; position: absolute; width: 28px; height: 28px; border: 2px solid #D8B878; } .ed-viewfinder__corners::before { top: 0; left: 0; border-right: 0; border-bottom: 0; } .ed-viewfinder__corners::after { bottom: 0; right: 0; border-left: 0; border-top: 0; } .ed-papercard { width: 62%; aspect-ratio: 85.6 / 54; background: #F7F3EA; color: #1c1d17; border-radius: 6px; padding: 5% 6%; transform: rotate(-4deg); box-shadow: 0 20px 40px -10px rgba(0,0,0,0.5); display: flex; flex-direction: column; justify-content: center; gap: 4%; } .ed-papercard b { font-family: var(--serif); font-weight: 500; font-size: clamp(0.95rem, 1.6vw, 1.3rem); letter-spacing: -0.01em; } .ed-papercard i { font-style: normal; font-size: clamp(0.62rem, 0.9vw, 0.78rem); color: #66685c; } .ed-papercard span { display: block; height: 5px; border-radius: 3px; background: #dcd6c8; width: 70%; } .ed-papercard span + span { width: 52%; } .ed-scanline { position: absolute; left: 10%; right: 10%; top: 18%; height: 62%; pointer-events: none; animation: edScan 3.2s ease-in-out infinite; will-change: transform; } .ed-scanline::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, #D8B878, transparent); box-shadow: 0 0 14px 1px rgba(216, 184, 120, 0.4); } @keyframes edScan { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(100%); } } .ed-extract { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; } .ed-extract div { padding: 12px 14px; border-bottom: 1px solid var(--rule); font-family: var(--mono); font-size: 0.78rem; display: flex; gap: 0.5rem; align-items: center; } .ed-extract div:nth-child(odd) { border-right: 1px solid var(--rule); } .ed-extract div:nth-last-child(-n+2) { border-bottom: 0; } .ed-extract [data-lucide], .ed-extract svg { color: var(--brand); } /* ---------- Toolkit grid ---------- */ .ed-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); } .ed-grid3 > * { padding: 30px clamp(18px, 2.4vw, 36px) 34px; border-bottom: 1px solid var(--rule); border-left: 1px solid var(--rule); } .ed-grid3 > *:nth-child(3n + 1) { border-left: 0; padding-left: 0; } .ed-kit__head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.1rem; } .ed-kit__ico { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--tint); color: var(--brand); } .ed-kit__ico [data-lucide], .ed-kit__ico svg { width: 19px; height: 19px; } .ed-kit ul { display: grid; gap: 0.7rem; } .ed-kit li { display: grid; grid-template-columns: 18px 1fr; gap: 0.7rem; font-size: 0.94rem; color: var(--ink-2); line-height: 1.45; } .ed-kit li [data-lucide], .ed-kit li svg { margin-top: 3px; color: var(--ink-3); width: 16px; height: 16px; } .ed-kit li strong { color: var(--ink); font-weight: 560; } .ed-new { font-family: var(--mono); font-style: normal; font-size: 0.62rem; letter-spacing: 0.1em; color: var(--accent); border: 1px solid currentColor; border-radius: 3px; padding: 0 4px; margin-left: 4px; vertical-align: 2px; } /* ---------- Use cases ---------- */ .ed-cases { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .ed-case { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 26px 24px; display: flex; flex-direction: column; gap: 0.9rem; transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); } .ed-case:hover { transform: translateY(-4px); box-shadow: var(--lift-2); } .ed-case__ico { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--rule); display: grid; place-items: center; color: var(--brand); } .ed-case ul { display: grid; gap: 0.5rem; font-size: 0.9rem; color: var(--ink-2); } .ed-case li { padding-left: 1rem; position: relative; } .ed-case li::before { content: '—'; position: absolute; left: 0; color: var(--ink-3); } .ed-case__plan { margin-top: auto; padding-top: 1rem; border-top: 1px dashed var(--rule); font-size: 0.84rem; color: var(--ink-3); } .ed-case__plan strong { color: var(--ink); font-weight: 560; } /* ---------- Showcase (live card + theme samples) ---------- */ .ed-live { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(40px, 6vw, 96px); align-items: center; } /* Live card — one physical card that flips in 3D */ .ed-flip-wrap { display: grid; gap: 22px; justify-items: center; width: 100%; max-width: 540px; justify-self: center; margin: 0; } .ed-flip { display: block; width: 100%; aspect-ratio: 85.6 / 54; perspective: 1600px; padding: 0; cursor: pointer; border-radius: 16px; } .ed-flip__inner { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 1s cubic-bezier(0.3, 1.2, 0.4, 1); } .ed-flip.is-flipped .ed-flip__inner { transform: rotateY(180deg); } .ed-flip__face { position: absolute; inset: 0; width: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; text-align: left; } .ed-flip__face--back { transform: rotateY(180deg); } .ed-flip .ed-idcard { box-shadow: var(--lift-3); } .ed-flip .ed-idcard__name { display: block; } .ed-flip .ed-idcard__role { display: block; } .ed-flip .ed-idcard__back-copy strong { display: block; } .ed-flip .ed-idcard__qr { width: 30%; } .ed-flip-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.6rem 1rem; } .ed-flip-bar .ed-seg button { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; } .ed-deflist { border-top: 1px solid var(--ink); } .ed-deflist li { display: grid; grid-template-columns: 22px 1fr; gap: 0.9rem; padding: 18px 0; border-bottom: 1px solid var(--rule); } .ed-deflist [data-lucide], .ed-deflist li > svg { margin-top: 4px; color: var(--brand); width: 18px; height: 18px; } .ed-deflist strong { display: block; font-weight: 560; margin-bottom: 0.15rem; } .ed-deflist span { color: var(--ink-2); font-size: 0.93rem; } .ed-live__cta { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 28px; } .ed-themes { margin-top: clamp(64px, 8vw, 110px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .ed-theme { display: grid; gap: 12px; } .ed-theme .ed-idcard { position: relative; width: 100%; transform: none; inset: auto; box-shadow: var(--lift-2); transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease); } .ed-theme:hover .ed-idcard { transform: translateY(-6px) rotate(-1deg); box-shadow: var(--lift-3); } .ed-theme figcaption { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; color: var(--ink-3); } /* ---------- Impact / comparison ---------- */ .ed-impact { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); margin-bottom: clamp(56px, 7vw, 96px); } .ed-impact > div { padding: 26px 22px 24px; border-left: 1px solid var(--rule); display: grid; gap: 0.4rem; align-content: start; } .ed-impact > div:first-child { border-left: 0; padding-left: 0; } .ed-impact__num { font-family: var(--serif); font-size: clamp(2rem, 3.6vw, 3rem); letter-spacing: -0.03em; line-height: 1; font-weight: 380; color: var(--ink); } .ed-impact__label { font-weight: 560; font-size: 0.95rem; } .ed-impact__note { font-size: 0.82rem; color: var(--ink-3); } .ed-vs { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; background: var(--surface); } .ed-vs__col { padding: clamp(24px, 3vw, 40px); } .ed-vs__col + .ed-vs__col { border-left: 1px solid var(--rule); background: #0D1729; color: #EDE9E0; } html[data-ed-theme="dark"] .ed-vs__col + .ed-vs__col { background: #060A11; } .ed-vs__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-bottom: 18px; margin-bottom: 8px; border-bottom: 1px solid currentColor; } .ed-vs__head h3 { font-family: var(--serif); font-weight: 400; font-size: 1.8rem; letter-spacing: -0.02em; } .ed-vs__head span { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.7; } .ed-vs__col--old h3 { text-decoration: line-through; text-decoration-color: var(--accent); text-decoration-thickness: 2px; color: var(--ink-2); } .ed-vs li { display: grid; grid-template-columns: 18px 1fr; gap: 0.8rem; padding: 12px 0; border-bottom: 1px solid color-mix(in oklab, currentColor 14%, transparent); font-size: 0.95rem; } .ed-vs li:last-child { border-bottom: 0; } .ed-vs li [data-lucide], .ed-vs li svg { margin-top: 4px; width: 16px; height: 16px; } .ed-vs__col--old li { color: var(--ink-2); } .ed-vs__col--old li [data-lucide], .ed-vs__col--old li svg { color: var(--accent); } .ed-vs__col--new li [data-lucide], .ed-vs__col--new li svg { color: #D8B878; } .ed-savings { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; } .ed-savings > div { border: 1px solid var(--rule); border-radius: var(--radius); padding: 22px 24px; display: grid; gap: 0.25rem; } .ed-savings__label { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); } .ed-savings__value { font-family: var(--serif); font-size: 2.4rem; letter-spacing: -0.03em; line-height: 1.1; } .ed-savings__note { font-size: 0.86rem; color: var(--ink-3); } /* ---------- Trust ---------- */ .ed-trust { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); } .ed-sec { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--ink); } .ed-sec > div { padding: 22px 20px 22px 0; border-bottom: 1px solid var(--rule); display: grid; gap: 0.4rem; align-content: start; } .ed-sec > div:nth-child(even) { padding-left: 20px; padding-right: 0; border-left: 1px solid var(--rule); } .ed-sec h4 { display: flex; align-items: center; gap: 0.55rem; font-weight: 560; font-size: 1rem; } .ed-sec h4 [data-lucide], .ed-sec h4 svg { color: var(--brand); width: 18px; height: 18px; } .ed-sec p { font-size: 0.88rem; color: var(--ink-2); line-height: 1.5; } .ed-pay { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: clamp(24px, 3vw, 36px); display: grid; gap: 1.4rem; align-content: start; } .ed-pay__head { display: flex; align-items: center; gap: 0.9rem; } .ed-pay__head .ed-kit__ico { width: 48px; height: 48px; } .ed-pay__head strong { display: block; font-family: var(--serif); font-size: 1.5rem; font-weight: 450; letter-spacing: -0.015em; } .ed-pay__head span { color: var(--ink-2); font-size: 0.92rem; } .ed-pay__methods { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); } .ed-pay__methods span { padding: 14px 8px; text-align: center; font-weight: 700; font-size: 0.9rem; letter-spacing: -0.01em; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .ed-pay__foot { display: flex; gap: 0.6rem; font-size: 0.85rem; color: var(--ink-3); line-height: 1.5; } .ed-pay__foot [data-lucide], .ed-pay__foot svg { margin-top: 3px; color: var(--brand); } .ed-pay__badges { display: flex; flex-wrap: wrap; gap: 0.45rem; } /* ---------- ROI (receipt) ---------- */ .ed-roi { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: clamp(40px, 6vw, 96px); align-items: start; } .ed-roi__inputs { display: grid; gap: 34px; } .ed-range { display: grid; gap: 12px; } .ed-range__top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: 0.97rem; color: var(--ink-2); } .ed-range__top output { font-family: var(--serif); font-size: 1.9rem; letter-spacing: -0.02em; color: var(--ink); line-height: 1; } .ed input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: transparent; cursor: pointer; margin: 0; } .ed input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(90deg, var(--brand) var(--p, 50%), var(--rule) var(--p, 50%)); border-radius: 2px; } .ed input[type="range"]::-moz-range-track { height: 2px; background: var(--rule); } .ed input[type="range"]::-moz-range-progress { height: 2px; background: var(--brand); } .ed input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -9px; border-radius: 50%; background: var(--paper); border: 2px solid var(--brand); box-shadow: var(--lift-1); transition: transform 0.2s; } .ed input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--paper); border: 2px solid var(--brand); } .ed input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.15); } .ed-roi__note { display: flex; gap: 0.6rem; font-size: 0.84rem; color: var(--ink-3); line-height: 1.55; padding-top: 22px; border-top: 1px solid var(--rule); } .ed-roi__note [data-lucide], .ed-roi__note svg { margin-top: 3px; } .ed-receipt { position: relative; background: var(--surface); padding: 34px 30px 30px; box-shadow: var(--lift-2); font-family: var(--mono); font-size: 0.86rem; --tooth: 10px; -webkit-mask: radial-gradient(circle at 50% 0, transparent 5px, #000 5.5px) 0 0 / var(--tooth) 51% repeat-x, radial-gradient(circle at 50% 100%, transparent 5px, #000 5.5px) 0 100% / var(--tooth) 51% repeat-x; mask: radial-gradient(circle at 50% 0, transparent 5px, #000 5.5px) 0 0 / var(--tooth) 51% repeat-x, radial-gradient(circle at 50% 100%, transparent 5px, #000 5.5px) 0 100% / var(--tooth) 51% repeat-x; } .ed-receipt__title { text-align: center; letter-spacing: 0.2em; text-transform: uppercase; font-size: 0.72rem; color: var(--ink-3); padding-bottom: 16px; border-bottom: 1px dashed var(--rule); } .ed-receipt__row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 14px 0; border-bottom: 1px dashed var(--rule); } .ed-receipt__row span:first-child { color: var(--ink-2); } .ed-receipt__row strong { font-weight: 500; font-size: 1.05rem; } .ed-receipt__hint { display: block; font-size: 0.72rem; color: var(--ink-3); margin-top: 3px; } .ed-receipt__total { padding: 20px 0 16px; border-bottom: 1px dashed var(--rule); } .ed-receipt__total-top { display: flex; justify-content: space-between; align-items: center; } .ed-receipt__total-top > span:first-child { text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.74rem; color: var(--ink-2); } .ed-receipt__pct { background: var(--brand); color: var(--on-brand); padding: 2px 8px; border-radius: 4px; font-size: 0.74rem; } .ed-receipt__big { display: block; font-family: var(--serif); font-size: clamp(2.6rem, 5vw, 3.6rem); letter-spacing: -0.035em; line-height: 1.05; margin-top: 8px; color: var(--ink); } .ed-receipt__3y { font-size: 0.8rem; color: var(--ink-3); } .ed-receipt__eco { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; padding: 16px 0; border-bottom: 1px dashed var(--rule); } .ed-receipt__eco strong { display: block; font-size: 1.1rem; font-weight: 500; } .ed-receipt__eco span { font-size: 0.68rem; color: var(--ink-3); } .ed-receipt__foot { text-align: center; padding-top: 18px; } /* ---------- Pricing ---------- */ .ed-price-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 28px; } .ed-seg { display: inline-flex; padding: 4px; border: 1px solid var(--rule); border-radius: 999px; background: var(--surface); } .ed-seg button { padding: 0.45rem 1rem; border-radius: 999px; font-size: 0.86rem; font-weight: 520; color: var(--ink-2); transition: background 0.25s, color 0.25s; } .ed-seg button.is-active { background: var(--ink); color: var(--paper); } .ed-assure { display: flex; flex-wrap: wrap; gap: 0.4rem 1.3rem; font-size: 0.86rem; color: var(--ink-3); } .ed-assure span { display: inline-flex; align-items: center; gap: 0.4rem; } .ed-plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: stretch; } .ed-plan { position: relative; background: var(--surface); border: 1px solid var(--rule); border-radius: 18px; padding: 28px 24px 24px; display: flex; flex-direction: column; gap: 1.1rem; } .ed-plan__tag { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); } .ed-plan__name { font-family: var(--serif); font-weight: 400; font-size: 2rem; letter-spacing: -0.025em; line-height: 1; margin-top: 6px; } .ed-plan__line { font-size: 0.9rem; color: var(--ink-2); min-height: 2.8em; } .ed-plan__price { padding: 16px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); display: grid; gap: 0.2rem; } .ed-plan__price strong { font-family: var(--serif); font-weight: 380; font-size: 2.6rem; letter-spacing: -0.035em; line-height: 1; } .ed-plan__price small { font-size: 0.82rem; color: var(--ink-3); } .ed-plan ul { display: grid; gap: 0.6rem; flex: 1; align-content: start; } .ed-plan li { display: grid; grid-template-columns: 16px 1fr; gap: 0.65rem; font-size: 0.9rem; color: var(--ink-2); line-height: 1.4; } .ed-plan li [data-lucide], .ed-plan li svg { margin-top: 3px; width: 15px; height: 15px; color: var(--brand); } .ed-plan li strong { color: var(--ink); font-weight: 560; } .ed-plan form { margin: 0; } .ed-plan__foot { font-size: 0.78rem; color: var(--ink-3); display: flex; align-items: center; gap: 0.4rem; justify-content: center; } .ed-plan--pro { background: #0D1729; color: #EDE9E0; border-color: #0D1729; box-shadow: var(--lift-3); --ink: #F2EEE5; --ink-2: #BCC0CB; --ink-3: #8C93A3; --rule: rgba(242,238,229,0.14); --brand: #D8B878; --on-brand: #0D1729; --paper: #0D1729; --accent: #D8B878; } html[data-ed-theme="dark"] .ed-plan--pro { background: #060A11; border-color: rgba(216,184,120,0.3); } .ed-plan__ribbon { position: absolute; top: -12px; left: 24px; background: #D8B878; color: #0D1729; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 5px 10px; border-radius: 4px; } .ed-seats { display: grid; gap: 8px; } .ed-seats label { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); } .ed-seats__row { display: grid; grid-template-columns: 1fr 64px; gap: 10px; align-items: center; } .ed-seats input[type="number"] { width: 100%; height: 36px; border: 1px solid var(--rule); border-radius: 8px; background: var(--paper); color: var(--ink); text-align: center; font-family: var(--mono); font-size: 0.9rem; } .ed-compare { margin-top: 28px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); } .ed-compare summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; font-weight: 560; } .ed-compare summary::-webkit-details-marker { display: none; } .ed-compare summary .ed-plus { transition: transform 0.3s var(--ease); } .ed-compare[open] summary .ed-plus { transform: rotate(45deg); } .ed-table-wrap { overflow-x: auto; border-top: 1px solid var(--rule); } .ed-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; min-width: 640px; } .ed-table th, .ed-table td { padding: 12px 18px; text-align: center; border-bottom: 1px solid var(--rule-2); } .ed-table th:first-child, .ed-table td:first-child { text-align: left; color: var(--ink-2); } .ed-table thead th { font-family: var(--serif); font-weight: 450; font-size: 1.1rem; color: var(--ink); padding-top: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--ink); } .ed-table .is-pop { background: var(--tint); } .ed-table .ed-table__group td { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); text-align: left; padding-top: 24px; } .ed-table .no { color: var(--ink-3); opacity: 0.6; } .ed-table strong { font-family: var(--serif); font-weight: 450; font-size: 1.15rem; display: block; color: var(--ink); } .ed-table small { color: var(--ink-3); } .ed-fine { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 56px; border-top: 1px solid var(--ink); } .ed-fine > div { padding: 20px 18px 0 0; } .ed-fine > div + div { padding-left: 18px; border-left: 1px solid var(--rule); } .ed-fine strong { display: block; font-weight: 560; font-size: 0.95rem; margin-bottom: 0.4rem; line-height: 1.35; } .ed-fine p { font-size: 0.86rem; color: var(--ink-2); line-height: 1.55; } /* ---------- FAQ ---------- */ .ed-faq { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: clamp(40px, 6vw, 96px); align-items: start; } .ed-faq__side { position: sticky; top: 110px; display: grid; gap: 1.4rem; } .ed-acc { border-top: 1px solid var(--ink); } .ed-acc details { border-bottom: 1px solid var(--rule); } .ed-acc summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 24px; gap: 1rem; align-items: center; padding: 22px 0; font-family: var(--serif); font-size: 1.2rem; font-weight: 420; letter-spacing: -0.01em; line-height: 1.3; transition: color 0.2s; } .ed-acc summary::-webkit-details-marker { display: none; } .ed-acc summary:hover { color: var(--brand); } .ed-acc summary::after { content: ''; width: 14px; height: 14px; justify-self: end; background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat; transition: transform 0.35s var(--ease); } .ed-acc details[open] summary::after { transform: rotate(45deg); } .ed-acc details p { padding: 0 3rem 24px 0; color: var(--ink-2); font-size: 0.98rem; line-height: 1.65; } .ed-acc--grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; border-top: 0; } .ed-acc--grid details:nth-child(-n+2) { border-top: 1px solid var(--ink); } .ed-acc--grid summary { font-size: 1.05rem; padding: 18px 0; } /* ---------- CTA ---------- */ .ed-cta { text-align: center; display: grid; justify-items: center; gap: 2rem; padding: clamp(40px, 6vw, 80px) 0; } .ed-cta .ed-display { font-size: clamp(2.6rem, 6.4vw, 5.6rem); max-width: 14ch; } /* ---------- Feedback (letter) ---------- */ .ed-letter-wrap { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(40px, 6vw, 96px); align-items: start; } .ed-letter { background: var(--surface); border: 1px solid var(--rule); border-radius: 6px; padding: clamp(24px, 3.4vw, 44px); box-shadow: var(--lift-2); position: relative; } .ed-letter__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-bottom: 18px; border-bottom: 1px solid var(--ink); margin-bottom: 8px; } .ed-letter__head .ed-brand { font-size: 1.1rem; } .ed-letter__stamp { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); border: 1px solid currentColor; padding: 4px 8px; border-radius: 3px; transform: rotate(3deg); } .ed-letter__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; } .ed-fld { display: grid; gap: 4px; padding: 16px 0 10px; border-bottom: 1px solid var(--rule); } .ed-fld > span { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); } .ed-fld > span small { text-transform: none; letter-spacing: 0; } .ed-fld input, .ed-fld textarea { all: unset; box-sizing: border-box; width: 100%; font-family: var(--serif); font-size: 1.15rem; color: var(--ink); padding: 4px 0; } .ed-fld textarea { height: 9.5em; resize: vertical; min-height: 7.5em; line-height: 1.9; background: repeating-linear-gradient(to bottom, transparent 0 calc(1.9em - 1px), var(--rule-2) calc(1.9em - 1px) 1.9em); white-space: pre-wrap; } .ed-fld input::placeholder, .ed-fld textarea::placeholder { color: var(--ink-3); font-style: italic; } .ed-fld:focus-within { border-bottom-color: var(--brand); } .ed-fld__err { font-family: var(--sans); font-size: 0.82rem; color: var(--accent); } .ed-letter__foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 24px; font-size: 0.84rem; color: var(--ink-3); } .ed-letter__foot span { display: inline-flex; align-items: center; gap: 0.45rem; } /* ---------- Footer ---------- */ .ed-footer { border-top: 1px solid var(--rule); padding: 72px 0 36px; position: relative; z-index: 2; } .ed-footer__grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; } .ed-footer__col h5 { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 14px; font-weight: 400; } .ed-footer__col ul { display: grid; gap: 10px; font-size: 0.94rem; } .ed-footer__col a { color: var(--ink-2); transition: color 0.2s; } .ed-footer__col a:hover { color: var(--ink); } .ed-wordmark { font-family: var(--serif); font-weight: 300; font-size: clamp(4.5rem, 17vw, 15rem); letter-spacing: -0.06em; line-height: 0.8; color: var(--ink); margin: 72px 0 28px; font-variation-settings: 'opsz' 144; user-select: none; white-space: nowrap; } .ed-wordmark__em { color: var(--accent); font-style: italic; font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1; } .ed-footer__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding-top: 22px; border-top: 1px solid var(--rule); font-size: 0.84rem; color: var(--ink-3); } /* ---------- Onboard modal ---------- */ .ed-modal { position: fixed; inset: 0; z-index: 2000; display: none; } .ed-modal.is-open { display: grid; place-items: center; padding: 16px; } .ed-modal__scrim { position: absolute; inset: 0; background: rgba(22, 24, 15, 0.42); backdrop-filter: blur(6px); animation: edFade 0.25s ease-out both; } .ed-modal__box { position: relative; width: 100%; max-width: 640px; background: var(--paper); border: 1px solid var(--rule); border-radius: 20px; padding: clamp(24px, 4vw, 40px); box-shadow: var(--lift-3); animation: edPop 0.35s var(--ease) both; } .ed-modal__x { position: absolute; top: 16px; right: 16px; } .ed-modal__head { display: grid; gap: 0.7rem; margin-bottom: 26px; padding-right: 40px; } .ed-modal__head h2 { font-family: var(--serif); font-weight: 400; font-size: 2rem; letter-spacing: -0.025em; line-height: 1.1; } .ed-modal__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .ed-choice { display: grid; gap: 0.5rem; padding: 22px; border: 1px solid var(--rule); border-radius: 14px; background: var(--surface); transition: border-color 0.25s, transform 0.3s var(--ease), box-shadow 0.3s; } .ed-choice:hover { border-color: var(--brand); transform: translateY(-3px); box-shadow: var(--lift-2); } .ed-choice h3 { font-family: var(--serif); font-weight: 450; font-size: 1.4rem; letter-spacing: -0.015em; } .ed-choice p { font-size: 0.9rem; color: var(--ink-2); } .ed-choice__cta { margin-top: 0.5rem; font-weight: 560; font-size: 0.9rem; color: var(--brand); display: inline-flex; gap: 0.35rem; align-items: center; } .ed-modal__foot { margin-top: 20px; font-size: 0.9rem; color: var(--ink-3); text-align: center; } @keyframes edFade { from { opacity: 0; } } @keyframes edPop { from { opacity: 0; transform: translateY(12px) scale(0.98); } } /* ---------- Global chrome overrides on editorial pages ---------- */ /* Editorial pages carry their own language switch in the nav/drawer */ .ed .mc-lang-pill { display: none; } .ed-lang { display: inline-flex; padding: 3px; border: 1px solid var(--rule); border-radius: 999px; margin: 0; } .ed-lang button { padding: 0.3rem 0.7rem; border-radius: 999px; font-size: 0.8rem; font-weight: 560; color: var(--ink-3); transition: background 0.2s, color 0.2s; } .ed-lang button.is-active { background: var(--ink); color: var(--paper); } .ed-lang button:not(.is-active):hover { color: var(--ink); } .ed-drawer__lang { padding: 18px 0 4px; } .ed .mc-lang-pill { background: color-mix(in oklab, var(--surface) 92%, transparent); border-color: var(--rule); box-shadow: var(--lift-1); } .ed .mc-lang-pill__btn { color: var(--ink-2); font-family: var(--sans); } .ed .mc-lang-pill__btn.is-active { background: var(--ink); color: var(--paper); } .ed .mc-offer-banner { border-radius: var(--radius); } /* Global toasts (base.html mcToast) */ .ed .mc-toaster { left: 0; right: 0; transform: none; align-items: center; padding: 0 12px; } .ed .mc-toast-card { background: var(--surface); color: var(--ink); border: 1px solid var(--rule); border-radius: 14px; box-shadow: var(--lift-3); font-family: var(--sans); max-width: min(460px, 100%); } .ed .mc-toast-card::before { width: 3px; background: var(--accent); } .ed .mc-toast-card--success .mc-toast-card__ico { background: var(--brand); color: var(--on-brand); } .ed .mc-toast-card--error::before, .ed .mc-toast-card--error .mc-toast-card__ico { background: #B3402A; } /* PWA install prompt (built by pwa.js, appended to body) */ .ed .mc-pwa-prompt { background: var(--surface); color: var(--ink); border: 1px solid var(--rule); border-radius: 16px; box-shadow: var(--lift-3); padding: 14px 14px 14px 16px; gap: 14px; max-width: 440px; font-family: var(--sans); } .ed .mc-pwa-prompt__ico { width: 44px; height: 44px; border-radius: 12px; background: var(--brand-deep, #0D1729); color: #D8B878; } html[data-ed-theme="dark"] .ed .mc-pwa-prompt__ico { background: #1B2B47; } .ed .mc-pwa-prompt__ico svg, .ed .mc-pwa-prompt__ico i { width: 20px; height: 20px; } .ed .mc-pwa-prompt__title { font-family: var(--serif); font-weight: 450; font-size: 1.08rem; letter-spacing: -0.01em; color: var(--ink); } .ed .mc-pwa-prompt__sub { color: var(--ink-3); font-size: 0.8rem; margin-top: 3px; } .ed .mc-pwa-prompt__btn { border-radius: 999px; font-weight: 560; font-family: var(--sans); color: var(--ink); border-color: var(--rule); } .ed .mc-pwa-prompt__btn--primary { background: var(--brand); color: var(--on-brand); border-color: var(--brand); padding: 0.55rem 1.1rem; } .ed .mc-pwa-prompt__btn--ghost { color: var(--ink-3); border: 0; } .ed .mc-pwa-ios { background: rgba(10, 14, 22, 0.45); } .ed .mc-pwa-ios__box { background: var(--paper); border-color: var(--rule); color: var(--ink); border-radius: 20px; box-shadow: var(--lift-3); } .ed .mc-pwa-ios__box h3 { font-family: var(--serif); font-weight: 450; color: var(--ink); font-size: 1.4rem; } .ed .mc-pwa-ios__box ol { color: var(--ink-2); } .ed .mc-pwa-ios__box ol strong { color: var(--ink); } /* ---------- Bangla typesetting ---------- Bengali conjuncts break under negative tracking, and Noto Serif Bengali has no true italic — so reset tracking, drop synthetic italics, open leading. */ .ed:lang(bn) { font-size: 17.5px; } .ed:lang(bn) :is(.ed-display, .ed-h2, .ed-h3, .ed-mission__quote, .ed-acc summary, .ed-stat__num, .ed-plan__name) { letter-spacing: 0; } .ed:lang(bn) :is(.ed-display, .ed-h2, .ed-h3) em, .ed:lang(bn) :is(.ed-mission__sign, .ed-ticker__track) { font-style: normal; } .ed:lang(bn) .ed-display { font-size: clamp(2.6rem, 5.4vw, 4.8rem); line-height: 1.18; font-weight: 500; } .ed:lang(bn) .ed-cta .ed-display { font-size: clamp(2.3rem, 5vw, 4.2rem); } .ed:lang(bn) .ed-h2 { line-height: 1.25; font-weight: 500; } .ed:lang(bn) .ed-kicker, .ed:lang(bn) .ed-plan__tag, .ed:lang(bn) .ed-step__eyebrow { letter-spacing: 0.02em; } /* ---------- Motion layer ---------- Everything below is gated on .js (set in ) so no-JS visitors see the finished page, and fully disabled under prefers-reduced-motion. */ /* Scroll progress hairline */ .ed-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 101; background: var(--accent); transform-origin: left; transform: scaleX(var(--p, 0)); pointer-events: none; } /* Headline word mask reveal */ .ed-w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 0.06em 0.14em 0; margin: 0 -0.06em -0.14em 0; } .ed-w > span { display: inline-block; } .js .ed-split .ed-w > span { transform: translate3d(0, 108%, 0); transition: transform 1.05s var(--ease); transition-delay: calc(var(--i, 0) * 55ms + var(--d0, 0ms)); } .js .ed-split.is-in .ed-w > span { transform: none; } .js .ed-split.ed-reveal { opacity: 1; transform: none; } .ed-display.ed-split { --d0: 120ms; } /* Hero stage entrance */ .js .ed-stage:not(.is-in) .ed-idcard--back { opacity: 0; transform: translate3d(60px, -40px, 0) rotate(18deg); } .js .ed-stage:not(.is-in) .ed-idcard--front { opacity: 0; transform: translate3d(-40px, 90px, 0) rotate(-18deg); } .js .ed-stage.is-in .ed-idcard--back { transition-delay: 0.25s, 0.25s; } .js .ed-stage.is-in .ed-idcard--front { transition-delay: 0.45s, 0.45s; } .js .ed-stage.is-in.is-settled .ed-idcard { transition-delay: 0s; } .js .ed-stage .ed-stamp { transition: opacity 0.6s var(--ease), transform 0.9s cubic-bezier(0.34, 1.56, 0.64, 1); transition-delay: 1.1s; } .js .ed-stage:not(.is-in) .ed-stamp { opacity: 0; transform: rotate(-60deg) scale(0.5); } .js .ed-stage .ed-stage__caption { transition: opacity 0.8s var(--ease) 1.2s; } .js .ed-stage:not(.is-in) .ed-stage__caption { opacity: 0; } .js .ed-stage.ed-reveal { opacity: 1; transform: none; } /* Hairline rules that draw left-to-right */ .js [data-ed-draw] { position: relative; border-top-color: transparent !important; } .js [data-ed-draw]::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--draw-c, var(--ink)); transform: scaleX(0); transform-origin: left; transition: transform 1.5s var(--ease); z-index: 1; } .js [data-ed-draw].is-in::before { transform: scaleX(1); } .ed-stats[data-ed-draw] { --draw-c: var(--rule); } .js .ed-kicker.ed-reveal::after { transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease) 0.35s; } .js .ed-kicker.ed-reveal.is-in::after { transform: scaleX(1); } /* Receipt prints line by line (no clip-path on the observed element — it would hide it from IntersectionObserver) */ .js .ed-receipt.ed-reveal > * { transition: opacity 0.5s var(--ease), transform 0.6s var(--ease); } .js .ed-receipt.ed-reveal:not(.is-in) > * { opacity: 0; transform: translateY(-8px); } .js .ed-receipt.ed-reveal.is-in > :nth-child(1) { transition-delay: 0.25s; } .js .ed-receipt.ed-reveal.is-in > :nth-child(2) { transition-delay: 0.45s; } .js .ed-receipt.ed-reveal.is-in > :nth-child(3) { transition-delay: 0.65s; } .js .ed-receipt.ed-reveal.is-in > :nth-child(4) { transition-delay: 0.9s; } .js .ed-receipt.ed-reveal.is-in > :nth-child(5) { transition-delay: 1.15s; } .js .ed-receipt.ed-reveal.is-in > :nth-child(6) { transition-delay: 1.35s; } /* Scanner: fields extract one by one after the scan line passes */ .js .ed-scan__visual .ed-extract div { transition: opacity 0.5s var(--ease), transform 0.6s var(--ease); } .js .ed-scan__visual:not(.is-in) .ed-extract div { opacity: 0; transform: translateX(-10px); } .js .ed-scan__visual.is-in .ed-extract div:nth-child(1) { transition-delay: 0.9s; } .js .ed-scan__visual.is-in .ed-extract div:nth-child(2) { transition-delay: 1.2s; } .js .ed-scan__visual.is-in .ed-extract div:nth-child(3) { transition-delay: 1.5s; } .js .ed-scan__visual.is-in .ed-extract div:nth-child(4) { transition-delay: 1.8s; } /* Footer wordmark letters rise */ .ed-wordmark .ed-ch { display: inline-block; } .js .ed-wordmark.ed-split-ch .ed-ch { transform: translate3d(0, 40%, 0); opacity: 0; transition: transform 1.2s var(--ease), opacity 0.8s var(--ease); transition-delay: calc(var(--i) * 60ms); } .js .ed-wordmark.ed-split-ch.is-in .ed-ch { transform: none; opacity: 1; } /* Magnetic buttons (transform set inline by JS) */ .ed-btn--primary { will-change: transform; } /* ---------- Reveal on scroll ---------- */ .js .ed-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); } .js .ed-reveal.is-in { opacity: 1; transform: none; } .js .ed-reveal[data-d="1"] { transition-delay: 0.08s; } .js .ed-reveal[data-d="2"] { transition-delay: 0.16s; } .js .ed-reveal[data-d="3"] { transition-delay: 0.24s; } @media (prefers-reduced-motion: reduce) { .js .ed-reveal { opacity: 1; transform: none; transition: none; } .ed-ticker__track, .ed-scanline { animation: none; } .ed-strike::after { animation: none; transform: rotate(-3deg) scaleX(1); } .ed-progress { display: none; } .js .ed-split .ed-w > span, .js .ed-wordmark.ed-split-ch .ed-ch { transform: none; opacity: 1; transition: none; } .js .ed-stage .ed-idcard, .js .ed-stage .ed-stamp, .js .ed-stage .ed-stage__caption { opacity: 1; transition: none; } .js .ed-stage:not(.is-in) .ed-idcard--back { transform: rotate(7deg); } .js .ed-stage:not(.is-in) .ed-idcard--front { transform: rotate(-5deg); } .js .ed-stage:not(.is-in) .ed-stamp { transform: rotate(-12deg); } .js [data-ed-draw]::before, .js .ed-kicker.ed-reveal::after { transform: scaleX(1); transition: none; } .js .ed-receipt.ed-reveal > * { opacity: 1; transform: none; transition: none; } .js .ed-scan__visual .ed-extract div { opacity: 1; transform: none; transition: none; } .ed-idcard, .ed-case, .ed-theme .ed-idcard { transition: none; } .ed-flip__inner { transition: none; } } /* ---------- Responsive ---------- */ @media (max-width: 1080px) { .ed-plans { grid-template-columns: 1fr 1fr; } .ed-cases { grid-template-columns: 1fr 1fr; } .ed-fine { grid-template-columns: 1fr 1fr; } .ed-fine > div:nth-child(3) { border-left: 0; padding-left: 0; } } @media (max-width: 900px) { .ed { font-size: 16px; } .ed-head { grid-template-columns: 1fr; align-items: start; } .ed-hero__grid, .ed-mission, .ed-scan, .ed-live, .ed-trust, .ed-roi, .ed-faq, .ed-letter-wrap { grid-template-columns: 1fr; } .ed-stage { max-width: 520px; margin-top: 8px; } .ed-faq__side { position: static; } .ed-live > .ed-flip-wrap { order: 2; } .ed-steps { grid-template-columns: 1fr; border-top: 0; } .ed-step, .ed-step + .ed-step { padding: 28px 0; border-left: 0; border-top: 1px solid var(--ink); } .ed-grid3 { grid-template-columns: 1fr 1fr; } .ed-grid3 > *:nth-child(3n + 1) { border-left: 1px solid var(--rule); padding-left: clamp(18px, 2.4vw, 36px); } .ed-grid3 > *:nth-child(2n + 1) { border-left: 0; padding-left: 0; } .ed-stats, .ed-impact { grid-template-columns: 1fr 1fr; } .ed-stat:nth-child(3), .ed-impact > div:nth-child(3) { border-left: 0; padding-left: 0; } .ed-stat:nth-child(n+3), .ed-impact > div:nth-child(n+3) { border-top: 1px solid var(--rule); } .ed-themes { grid-template-columns: 1fr 1fr; } .ed-themes .ed-theme:last-child { display: none; } .ed-footer__grid { grid-template-columns: 1fr 1fr; } .ed-footer__grid > :first-child { grid-column: 1 / -1; } } @media (max-width: 640px) { .ed-grid3, .ed-cases, .ed-plans, .ed-vs, .ed-savings, .ed-sec, .ed-fine, .ed-acc--grid, .ed-letter__row, .ed-modal__grid, .ed-themes { grid-template-columns: 1fr; } .ed-grid3 > *, .ed-grid3 > *:nth-child(3n + 1) { border-left: 0; padding-left: 0; padding-right: 0; } .ed-vs__col + .ed-vs__col { border-left: 0; border-top: 1px solid var(--rule); } .ed-sec > div, .ed-sec > div:nth-child(even) { padding: 18px 0; border-left: 0; } .ed-fine > div, .ed-fine > div + div { padding: 18px 0; border-left: 0; border-bottom: 1px solid var(--rule); } .ed-acc--grid details:nth-child(2) { border-top: 0; } .ed-themes .ed-theme:last-child { display: grid; } .ed-themes .ed-theme:nth-child(n+2) { display: none; } .ed-pay__methods { grid-template-columns: repeat(2, 1fr); } .ed-stage { aspect-ratio: 1 / 1.1; } .ed-stamp { width: 74px; height: 74px; } .ed-stamp strong { font-size: 1.15rem; } .ed-acc details p { padding-right: 0; } .ed-hero__cta .ed-btn { flex: 1 1 100%; } .ed-receipt { padding: 30px 20px 26px; } .ed-footer__grid { grid-template-columns: 1fr 1fr; } } @media print { .ed::before, .ed-nav, .ed-ticker { display: none; } } /* ========================================================================== Mobile-first comfort layer (most MY-Card visitors are on phones). Touch screens get 44px tap targets; small screens get a 12px text floor for the mono/uppercase micro-labels used across the system. ========================================================================== */ @media (pointer: coarse) { .ed .ed-brand, .ed .dash-topbar__logo, .ed .pc-cover__brand { min-height: 44px; display: inline-flex; align-items: center; } .ed .ed-lang button, .ed .pc-lang button { min-width: 44px; min-height: 36px; } .ed .ed-lang, .ed .pc-lang { min-height: 44px; align-items: center; } .ed .ed-iconbtn, .ed .pc-chip--icon { min-width: 44px; min-height: 44px; } .ed .ed-link { min-height: 44px; display: inline-flex; align-items: center; } .ed .ed-footer__col a { display: inline-flex; align-items: center; min-height: 44px; } .ed .ed-footer__col ul { gap: 0; } .ed .ed-btn--sm { min-height: 44px; } .ed .ed-seg button { min-height: 40px; } .ed .ed-acc summary { min-height: 56px; } } @media (max-width: 640px) { .ed .ed-kicker, .ed .ed-tile__label, .ed .ed-plan__tag, .ed .ed-field span:first-child, .ed .ed-live__label, .ed .ed-receipt__eco span, .ed .ed-vs__head span, .ed .ed-theme figcaption, .ed .ed-stage__caption b, .ed .ed-savings__label, .ed .pc-label, .ed .pc-row__k, .ed .ed-table-app th, .ed .ed-fld > span, .ed .ed-seats label, .ed .ed-new { font-size: 0.75rem; } .ed .ed-plan__ribbon { font-size: 0.72rem; } .ed .ed-sdg-sub { font-size: 0.75rem; } } @media (max-width: 640px) { .ed .ed-footer__col h5, .ed .ed-letter__stamp, .ed .ed-fld > span small, .ed .ed-stamp { font-size: 0.72rem; } .ed .ed-idcard__role { font-size: 0.72rem; } } /* ---------- Scroll performance ---------- */ /* Infinite decorative loops stop while their section is off screen (editorial.js toggles .is-offscreen). */ .is-offscreen, .is-offscreen *, .is-offscreen *::before, .is-offscreen *::after { animation-play-state: paused !important; } /* Blurring whatever scrolls underneath a sticky bar is costly on phones; a near-opaque bar looks the same. */ @media (hover: none) { .ed-nav { backdrop-filter: none; -webkit-backdrop-filter: none; background: color-mix(in oklab, var(--paper) 97%, transparent); } } @supports (animation-timeline: scroll()) { .ed-progress { transform: scaleX(0); animation: edProgress linear both; animation-timeline: scroll(root block); } @keyframes edProgress { to { transform: scaleX(1); } } } /* Magnetic buttons only move under a mouse; don't reserve a GPU layer for every button on phones. */ @media (hover: none) { .ed-btn--primary { will-change: auto; } } /* Sections below the fold are skipped (no style, layout or paint) until they come near the screen. `auto` remembers each section's real height once it has been drawn, so the scrollbar settles. */ .ed-section { content-visibility: auto; contain-intrinsic-size: auto 1100px; } .ed-cv-off .ed-section { content-visibility: visible; } /* Phones: the hero keeps its entrance, everything below simply appears — reveal transitions on every card and word were the main cause of dropped frames while scrolling. */ @media (hover: none) { .js .ed-section .ed-reveal, .js .ed-footer .ed-reveal { opacity: 1; transform: none; transition: none; } .js .ed-section .ed-split .ed-w > span { transform: none; transition: none; } .js .ed-section .ed-kicker.ed-reveal::after { transform: scaleX(1); transition: none; } .js .ed-wordmark.ed-split-ch .ed-ch { transform: none; opacity: 1; transition: none; } } html.ed-html { scroll-padding-top: 84px; }