/* ========================================================================= DMly Home — shared site stylesheet Design tokens + global reset + shared component styles (nav, mega-menu, footer, buttons). Page-specific rules stay inline in each page's (kept verbatim from the prototype for pixel fidelity). ========================================================================= */ :root { /* Brand */ --dmly-green: #12715B; /* primary */ --dmly-green-hover: #0F5E4B; /* primary hover / link hover */ --dmly-green-soft: #8FE3C6; /* accent mint */ /* Ink & text */ --dmly-ink: #211E18; /* headings / strong text */ --dmly-text: #5F5947; /* body / nav links */ --dmly-text-2: #3A352B; /* feature list text */ --dmly-muted: #7A7360; /* secondary copy */ --dmly-muted-2: #8A8070; /* captions */ --dmly-mono-muted: #A99E84; /* mono eyebrow labels */ --dmly-copyright: #9A8E6E; /* Surfaces */ --dmly-paper: #FAF9F5; /* page background */ --dmly-paper-2: #F6F3EC; /* footer / soft panels */ --dmly-paper-3: #FBFAF6; /* card washes */ --dmly-dot: #F2EEE6; /* radial dot texture */ /* Lines */ --dmly-border: #EFEAE1; --dmly-border-2: #E7E1D4; --dmly-border-hover: #D8CBB2; /* Type */ --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif; --font-sans: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'Spline Sans Mono', ui-monospace, 'SF Mono', Menlo, monospace; } /* --------------------------------------------------------------- Reset --- */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--dmly-paper); font-family: var(--font-sans); color: var(--dmly-ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: var(--dmly-green); text-decoration: none; } a:hover { color: var(--dmly-green-hover); } img { max-width: 100%; } /* ---------------------------------------------------------- Page frame --- Box every page's content to match the Home layout: the paper root
(every page has one — it carries `min-height:100vh`) stays full-width so the dotted background bleeds edge-to-edge, while its top-level children (nav, sections, footer) are centred in a 1320px column. Home already wraps its content in a 1320px
; this brings the inner pages in line. */ body > div[style*="min-height:100vh"] > *, .dmly-root > * { max-width: 1320px; margin-left: auto; margin-right: auto; } /* ---------------------------------------------- Shared button hovers --- */ .btn-green { transition: background .18s ease; } .btn-green:hover { background: var(--dmly-green-hover) !important; } .btn-ghost { transition: border-color .18s ease, color .18s ease; } .btn-ghost:hover { border-color: var(--dmly-border-hover) !important; color: var(--dmly-green) !important; } /* ----------------------------------------------------- Footer links --- */ .foot-link { transition: color .15s ease; } .foot-link:hover { color: var(--dmly-ink) !important; } .foot-link-d:hover { color: #F3EFE6 !important; } /* ------------------------------------------------ Accordion (FAQ) hooks --- */ [data-acc-body] { max-height: 0; opacity: 0; overflow: hidden; margin-top: 0; transition: max-height .3s ease, opacity .22s ease, margin-top .3s ease; } [data-acc-item].acc-open [data-acc-body] { max-height: var(--acc-max, 340px); opacity: 1; margin-top: 14px; } [data-acc-chev] { transition: transform .22s ease; } [data-acc-item].acc-open [data-acc-chev] { transform: rotate(180deg); } /* --------------------------------------------- Billing toggle (Pricing) --- */ [data-bill] { font-size: 14px; font-weight: 600; color: var(--dmly-text); border-radius: 999px; padding: 9px 20px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 0; font-family: inherit; } [data-bill].bill-active { color: #fff; background: var(--dmly-green); } /* ------------------------------------------- Filter buttons (Blog etc.) --- */ [data-filter-btn] { cursor: pointer; font-family: inherit; } /* ======================================================================= NAVIGATION (shared partial: partials/nav.html) The