/* ============================================================================ DurDurTec — section layer, spec v2 Composition only. Cards, illustrations, buttons, inputs, chips and the spec table are defined in durdurtec-tokens.css and durdurtec-components.css and are consumed here as written, never redefined. Every value resolves through a token. No literal hex, radius, duration or font-size appears in this file. ============================================================================ */ /* --- Marketing body scale -------------------------------------------------- Scoped to the wrapper, not , so the client area keeps twenty-one's own sizing. */ .dt-marketing { font-size: var(--dt-text-body); line-height: var(--dt-leading-normal); } /* --- Page rhythm — spec 3 -------------------------------------------------- "Sections alternate white and --dt-surface-sunken." The alternation is derived from position in the rendered section list, not from a per-section setting: nth-of-type counts the sections that actually rendered, so a disabled or empty section cannot leave a doubled band. */ .dt-marketing > section:nth-of-type(even) { background: var(--dt-surface-sunken); } /* --- Section head — spec 4: headings and eyebrows centred ------------------ */ .dt-section-head { max-inline-size: 46rem; margin-inline: auto; margin-block-end: var(--dt-space-7); text-align: center; } .dt-section-head h2 { margin: 0; font-family: var(--dt-font-display); font-size: var(--dt-text-3xl); font-weight: var(--dt-weight-heading); letter-spacing: var(--dt-tracking-tight); line-height: var(--dt-leading-snug); color: var(--dt-text); } .dt-section-sub { margin: var(--dt-space-4) 0 0; font-size: var(--dt-text-body); line-height: var(--dt-leading-normal); color: var(--dt-text-subtle); } /* --- Card anatomy — spec 1 ------------------------------------------------- Illustration slot, title, body, price link. The slot itself comes from .dt-art in the tokens file; these are the text roles beneath it. */ .dt-card-title { margin: 0; font-family: var(--dt-font-sans); font-size: var(--dt-text-card); font-weight: var(--dt-weight-heading); letter-spacing: var(--dt-tracking-card); line-height: var(--dt-leading-snug); color: var(--dt-text); } .dt-card-body { margin: var(--dt-space-3) 0 0; font-size: var(--dt-text-body); line-height: var(--dt-leading-normal); color: var(--dt-ink-500); } .dt-card-price { margin-block-start: var(--dt-space-4); } /* --- Hero — spec 4 --------------------------------------------------------- */ .dt-hero { padding-block: var(--dt-section-y); } .dt-hero-inner { display: grid; gap: var(--dt-space-8); align-items: center; } .dt-hero-copy { text-align: center; margin-inline: auto; max-inline-size: 44rem; } .dt-hero h1 { margin: 0; font-family: var(--dt-font-display); font-size: var(--dt-text-4xl); font-weight: var(--dt-weight-heading); letter-spacing: var(--dt-tracking-display); line-height: var(--dt-leading-tight); color: var(--dt-text); } .dt-hero-sub { margin: var(--dt-space-5) auto 0; font-size: var(--dt-text-lg); line-height: var(--dt-leading-normal); color: var(--dt-ink-500); max-inline-size: 42rem; } .dt-hero-actions { display: flex; flex-wrap: wrap; gap: var(--dt-space-4); justify-content: center; margin-block-start: var(--dt-space-6); } .dt-hero-visual { display: grid; place-items: center; } /* --- Split — control-panel, contact, about-values, support ----------------- */ .dt-split { display: grid; gap: var(--dt-space-8); align-items: center; } .dt-split-copy { text-align: center; } .dt-split-copy > h2 { margin: var(--dt-space-2) 0 0; font-family: var(--dt-font-display); font-size: var(--dt-text-3xl); font-weight: var(--dt-weight-heading); letter-spacing: var(--dt-tracking-tight); line-height: var(--dt-leading-snug); color: var(--dt-text); } .dt-split-copy > p { margin: var(--dt-space-4) auto 0; font-size: var(--dt-text-body); line-height: var(--dt-leading-normal); color: var(--dt-ink-500); max-inline-size: 40rem; } .dt-split-visual { display: grid; place-items: center; min-inline-size: 0; } .dt-actions { display: flex; flex-wrap: wrap; gap: var(--dt-space-4); justify-content: center; margin-block-start: var(--dt-space-6); } /* --- Band — migration ------------------------------------------------------ */ .dt-band-inner { text-align: center; max-inline-size: 46rem; margin-inline: auto; } .dt-band-inner h2 { margin: var(--dt-space-2) 0 0; font-family: var(--dt-font-display); font-size: var(--dt-text-3xl); font-weight: var(--dt-weight-heading); letter-spacing: var(--dt-tracking-tight); line-height: var(--dt-leading-snug); color: var(--dt-text); } .dt-band-text { margin: var(--dt-space-4) auto 0; font-size: var(--dt-text-body); line-height: var(--dt-leading-normal); color: var(--dt-ink-500); max-inline-size: 44rem; } /* --- CTA ------------------------------------------------------------------- */ .dt-cta-inner { text-align: center; max-inline-size: 46rem; margin-inline: auto; } .dt-cta-inner h2 { margin: 0; font-family: var(--dt-font-display); font-size: var(--dt-text-3xl); font-weight: var(--dt-weight-heading); letter-spacing: var(--dt-tracking-tight); line-height: var(--dt-leading-snug); color: var(--dt-text); } .dt-cta-inner p { margin: var(--dt-space-4) auto 0; font-size: var(--dt-text-body); line-height: var(--dt-leading-normal); color: var(--dt-ink-500); max-inline-size: 44rem; } /* --- Pricing — spec 1: the featured plan is the only bordered card --------- */ .dt-price-card { position: relative; display: flex; flex-direction: column; } .dt-price-card-head { margin-block-end: var(--dt-space-4); } .dt-price-card-head h3 { margin: 0; font-family: var(--dt-font-sans); font-size: var(--dt-text-card); font-weight: var(--dt-weight-heading); letter-spacing: var(--dt-tracking-card); color: var(--dt-text); } .dt-plan-subtitle { margin: var(--dt-space-2) 0 0; font-size: var(--dt-text-body); color: var(--dt-ink-500); } .dt-price-badge { position: absolute; inset-block-start: 0; inset-inline-start: 50%; transform: translate(-50%, -50%); background: var(--dt-citron-700); color: var(--dt-ink-0); border-radius: var(--dt-radius-pill); padding: var(--dt-space-1) var(--dt-space-3); font-family: var(--dt-font-mono); font-size: var(--dt-text-3xs); font-weight: var(--dt-weight-ui); letter-spacing: var(--dt-tracking-eyebrow); text-transform: uppercase; white-space: nowrap; box-shadow: var(--dt-shadow-sm); } [dir="rtl"] .dt-price-badge { transform: translate(50%, -50%); } .dt-price { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: var(--dt-space-2); } .dt-price del { font-family: var(--dt-font-mono); font-size: var(--dt-text-body); color: var(--dt-text-subtle); } .dt-price strong { font-family: var(--dt-font-mono); font-variant-numeric: tabular-nums; font-size: var(--dt-text-2xl); font-weight: var(--dt-weight-heading); letter-spacing: var(--dt-tracking-tight); color: var(--dt-text); } .dt-price-cycle { font-family: var(--dt-font-mono); font-size: var(--dt-text-2xs); letter-spacing: var(--dt-tracking-eyebrow); text-transform: uppercase; color: var(--dt-text-subtle); } .dt-price-effective { margin: var(--dt-space-2) 0 0; font-family: var(--dt-font-mono); font-size: var(--dt-text-2xs); color: var(--dt-text-subtle); } .dt-plan-specs { list-style: none; margin: var(--dt-space-5) 0 0; padding: 0; display: grid; gap: var(--dt-space-3); text-align: start; } .dt-plan-specs li { position: relative; padding-inline-start: var(--dt-space-5); font-size: var(--dt-text-body); line-height: var(--dt-leading-snug); color: var(--dt-ink-500); } .dt-plan-specs li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.5em; inline-size: var(--dt-space-3); block-size: var(--dt-border-width-strong); border-radius: var(--dt-radius-pill); background: var(--dt-citron-500); } .dt-plan-use-case { margin: var(--dt-space-4) 0 0; font-size: var(--dt-text-body); line-height: var(--dt-leading-normal); color: var(--dt-ink-500); } .dt-price-card .dt-btn { margin-block-start: auto; align-self: stretch; } .dt-price-card .dt-plan-specs + .dt-btn { margin-block-start: var(--dt-space-6); } /* Billing switcher: a control, sized to its content. Nested radii stay exact, inner = outer minus padding. */ .dt-billing-switcher-wrap { display: flex; justify-content: center; margin-block-end: var(--dt-space-6); } /* --- FAQ — an accordion of floating cards --------------------------------- */ .dt-faq-list { display: grid; gap: var(--dt-space-4); max-inline-size: 52rem; margin-inline: auto; } .dt-faq-item { padding: 0; text-align: start; overflow: hidden; } .dt-faq-trigger { inline-size: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--dt-space-4); border: 0; background: transparent; padding: var(--dt-space-5) var(--dt-space-6); text-align: start; cursor: pointer; font-family: var(--dt-font-sans); font-size: var(--dt-text-sm); font-weight: var(--dt-weight-heading); color: var(--dt-text); } .dt-faq-trigger b { inline-size: var(--dt-space-3); block-size: var(--dt-space-3); border-inline-end: var(--dt-border-width-strong) solid var(--dt-citron-700); border-block-end: var(--dt-border-width-strong) solid var(--dt-citron-700); transform: rotate(45deg); flex: 0 0 auto; transition: transform var(--dt-duration-std) var(--dt-ease); } .dt-faq-trigger[aria-expanded="true"] b { transform: rotate(-135deg); } .dt-faq-answer { padding: 0 var(--dt-space-6) var(--dt-space-5); } .dt-faq-answer p { margin: 0; font-size: var(--dt-text-body); line-height: var(--dt-leading-normal); color: var(--dt-ink-500); } /* The accordion is a list of cards; a card that only opens should not lift. */ .dt-faq-item:hover { transform: none; box-shadow: var(--dt-shadow-card); } /* --- Legal — spec 4: the one left-aligned exception ------------------------ */ .dt-legal-body { font-size: var(--dt-text-body-lg); line-height: var(--dt-leading-longform); color: var(--dt-ink-500); max-inline-size: 72ch; text-align: start; } .dt-legal-head { text-align: start; margin-inline: 0; } /* --- Contact -------------------------------------------------------------- */ .dt-contact-form { display: grid; gap: var(--dt-space-4); text-align: start; } .dt-contact-form label { display: grid; gap: var(--dt-space-2); } .dt-contact-form label > span { font-size: var(--dt-text-xs); font-weight: var(--dt-weight-heading); color: var(--dt-text); } .dt-contact-form textarea.dt-input { resize: vertical; min-block-size: 8rem; } .dt-form-note { margin: 0; font-size: var(--dt-text-xs); color: var(--dt-text-subtle); } .dt-contact-methods { margin-block-start: var(--dt-space-6); } .dt-contact-methods .dt-card-title { margin-block-start: 0; } /* --- Showcase -------------------------------------------------------------- */ .dt-showcase-card img { inline-size: 100%; block-size: auto; aspect-ratio: 360 / 210; object-fit: contain; } .dt-showcase-price { font-size: var(--dt-text-body); color: var(--dt-ink-500); } .dt-showcase-price strong { font-family: var(--dt-font-mono); font-variant-numeric: tabular-nums; font-weight: var(--dt-weight-heading); color: var(--dt-citron-700); } /* --- Stats / locations / testimonials — built, seeded disabled ------------- */ .dt-stat-value { display: block; font-family: var(--dt-font-mono); font-variant-numeric: tabular-nums; font-size: var(--dt-text-2xl); font-weight: var(--dt-weight-heading); letter-spacing: var(--dt-tracking-tight); line-height: var(--dt-leading-tight); color: var(--dt-citron-700); } .dt-stat-label { display: block; margin-block-start: var(--dt-space-2); font-size: var(--dt-text-body); font-weight: var(--dt-weight-heading); color: var(--dt-text); } .dt-stat-note { display: block; margin-block-start: var(--dt-space-1); font-family: var(--dt-font-mono); font-size: var(--dt-text-2xs); color: var(--dt-text-subtle); } .dt-location-city { margin: 0; font-family: var(--dt-font-sans); font-size: var(--dt-text-card); font-weight: var(--dt-weight-heading); letter-spacing: var(--dt-tracking-card); color: var(--dt-text); } .dt-location-region { margin: var(--dt-space-2) 0 0; font-family: var(--dt-font-mono); font-size: var(--dt-text-2xs); letter-spacing: var(--dt-tracking-eyebrow); text-transform: uppercase; color: var(--dt-citron-700); } .dt-location-facility { margin: var(--dt-space-3) 0 0; font-size: var(--dt-text-body); line-height: var(--dt-leading-normal); color: var(--dt-ink-500); } .dt-testimonials-grid figure { margin: 0; } .dt-testimonials-grid blockquote { margin: 0; font-size: var(--dt-text-body); line-height: var(--dt-leading-normal); color: var(--dt-text); } .dt-testimonials-grid figcaption { margin-block-start: var(--dt-space-5); } .dt-testimonial-name { display: block; font-size: var(--dt-text-body); font-weight: var(--dt-weight-heading); color: var(--dt-text); } .dt-testimonial-role { display: block; margin-block-start: var(--dt-space-1); font-family: var(--dt-font-mono); font-size: var(--dt-text-2xs); letter-spacing: var(--dt-tracking-eyebrow); text-transform: uppercase; color: var(--dt-text-subtle); } /* --- Entry animation — spec 5 ---------------------------------------------- Rise 12px and fade, once per view, staggered 60ms across a row. The baseline is VISIBLE: opacity 1, no transform. Nothing is hidden by CSS alone, so with JavaScript disabled or broken every card is fully readable. The script adds .dt-reveal-armed to first, and only then may an element be offset -- so the hidden state exists only where JS is proven to be running and able to remove it again. */ .dt-reveal-armed [data-dt-reveal] { opacity: 0; transform: translateY(var(--dt-reveal-rise)); transition: opacity var(--dt-duration-entry) var(--dt-ease), transform var(--dt-duration-entry) var(--dt-ease); transition-delay: var(--dt-reveal-delay, 0ms); } .dt-reveal-armed [data-dt-reveal].is-revealed { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { /* No transform, no stagger, no delay -- and no dependence on the observer ever firing, so content cannot be left invisible. */ .dt-reveal-armed [data-dt-reveal], .dt-reveal-armed [data-dt-reveal].is-revealed { opacity: 1; transform: none; transition: none; transition-delay: 0ms; } .dt-card:hover, .dt-card:focus-visible { transform: none; } .dt-card:hover .dt-art-float { transform: none; } } /* --- Responsive ------------------------------------------------------------ */ @media (max-width: 920px) { .dt-cardgrid > * { flex-basis: calc((100% - var(--dt-grid-gap)) / 2); } } @media (max-width: 620px) { .dt-cardgrid > * { flex-basis: 100%; } } /* ============================================================================ Phase 5 — spec-table, product-comparison, domain-search ============================================================================ */ /* Screen-reader-only, for headers that are visual noise but structural need. */ .dt-visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* --- Spec table ------------------------------------------------------------ */ .dt-spectable .dt-chip { margin-inline-end: var(--dt-space-2); } .dt-spectable tbody tr.is-featured { background: var(--dt-accent-tint); } .dt-spectable tbody tr.is-featured:hover { background: var(--dt-accent-tint); } .dt-spectable td .dt-btn { white-space: nowrap; } /* --- Product comparison ---------------------------------------------------- */ .dt-comparison th[scope="col"] { text-align: center; } .dt-comparison th[scope="col"]:first-child { text-align: start; } .dt-comparison td { text-align: center; } .dt-comparison .dt-compare-label { text-align: start; font-family: var(--dt-font-sans); font-size: var(--dt-text-body); font-weight: var(--dt-weight-heading); color: var(--dt-text); background: transparent; text-transform: none; letter-spacing: var(--dt-tracking-normal); border-block-start: var(--dt-border-width) solid var(--dt-border); padding: var(--dt-space-4); } /* The highlighted plan column carries the citron emphasis, matching the featured card so the same plan reads as recommended in both places. */ .dt-comparison th.is-featured { background: var(--dt-citron-700); color: var(--dt-ink-0); } .dt-comparison td.is-featured { background: var(--dt-accent-tint); } .dt-tick { color: var(--dt-citron-700); font-weight: var(--dt-weight-heading); } .dt-dash { color: var(--dt-text-subtle); } /* --- Domain search --------------------------------------------------------- */ .dt-domain-form { display: flex; flex-wrap: wrap; gap: var(--dt-space-3); max-inline-size: 40rem; margin-inline: auto; } .dt-domain-form .dt-input { flex: 1 1 16rem; } .dt-tld-row { list-style: none; margin: var(--dt-space-6) 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--dt-space-3); } .dt-tld { display: inline-flex; align-items: baseline; gap: var(--dt-space-2); padding: var(--dt-space-2) var(--dt-space-4); background: var(--dt-surface-raised); border-radius: var(--dt-radius-pill); box-shadow: var(--dt-shadow-sm); } .dt-tld-ext { font-family: var(--dt-font-mono); font-size: var(--dt-text-body); font-weight: var(--dt-weight-heading); color: var(--dt-citron-700); } .dt-tld-price { font-size: var(--dt-text-2xs); color: var(--dt-text-subtle); } /* --- Tables at narrow widths ------------------------------------------------ One DOM, not a second markup block and not a sideways scroll. Each row becomes a stacked card and every cell is labelled from its own column header via data-label, so the headers have a single source of truth and nothing is hidden from assistive technology at either width. */ @media (max-width: 760px) { .dt-spectable thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); } .dt-spectable tbody tr { display: block; border-block-start: var(--dt-border-width) solid var(--dt-border); padding: var(--dt-space-4) var(--dt-space-5); } .dt-spectable tbody tr:first-child { border-block-start: 0; } .dt-spectable tbody td { display: flex; align-items: baseline; justify-content: space-between; gap: var(--dt-space-4); border: 0; padding: var(--dt-space-1) 0; text-align: end; } .dt-spectable tbody td::before { content: attr(data-label); font-family: var(--dt-font-mono); font-size: var(--dt-text-2xs); letter-spacing: var(--dt-tracking-wide); text-transform: uppercase; color: var(--dt-text-subtle); text-align: start; } .dt-spectable tbody td:empty { display: none; } .dt-spectable .dt-spectable-plan { font-size: var(--dt-text-card); } .dt-comparison .dt-compare-label { display: block; border: 0; padding: 0 0 var(--dt-space-2); } .dt-comparison td { text-align: end; } .dt-comparison td.is-featured { background: transparent; } }