/* ========================================================================== Amira Trümner — Design System, global layer Spec: DESIGN-SYSTEM.md · v0.2 · 2026-08-27 Deployed to: wp-content/themes/Divi_Child_securemode/assets/at-design-system.css SCOPE. This file holds only what is genuinely site-wide: the webfonts, the colour/space tokens, the button component, and the global footer. It must NOT restyle arbitrary page content (p, h1, .et_pb_row …). Pages are migrated one at a time and each carries its own scoped block until it is. CASCADE. Divi prints its Theme-Options CSS inline in AFTER every enqueued stylesheet, so a bare `#main-footer` loses to Divi's own `#main-footer{background-color:…}`. Every footer selector therefore carries a leading `body`, which outranks it on specificity without !important. ========================================================================== */ /* --------------------------------------------------------------- webfonts */ /* Self-hosted. German site: Google's CDN would be a GDPR problem. */ @font-face{font-family:"AT Fraunces";src:url("/wp-content/uploads/at-fonts/fraunces-var-latin.woff2") format("woff2");font-weight:300 700;font-style:normal;font-display:swap} @font-face{font-family:"AT Newsreader";src:url("/wp-content/uploads/at-fonts/newsreader-var-latin.woff2") format("woff2");font-weight:300 600;font-style:normal;font-display:swap} @font-face{font-family:"AT Inter";src:url("/wp-content/uploads/at-fonts/inter-var-latin.woff2") format("woff2");font-weight:400 600;font-style:normal;font-display:swap} /* ----------------------------------------------------------------- tokens */ :root{ /* ground */ --at-paper:#F6F1E8; --at-paper-hi:#FCF9F3; --at-stone:#B6A995; --at-taupe:#8A7E6E; --at-espresso:#2C2420; --at-ink:#191411; /* signature */ --at-oxblood:#6E1D2B; --at-red:#A82F22; --at-persimmon:#C4562B; --at-gold:#A98A4B; /* type */ --at-serif:"AT Fraunces",Georgia,serif; --at-text:"AT Newsreader",Georgia,serif; --at-sans:"AT Inter",-apple-system,Helvetica,Arial,sans-serif; /* space */ --at-s2:1rem; --at-s3:1.5rem; --at-s4:2.5rem; --at-s5:4rem; --at-s6:6.5rem; --at-s7:10rem; /* footer ink on espresso */ --at-on-dark:rgba(246,241,232,.74); --at-hairline:rgba(246,241,232,.14); } /* -------------------------------------------------------- button (global) */ /* Promoted out of the page-scoped block so the footer and every future page share one definition. `body` keeps it above Divi's global link colour. */ body .at-btn{ display:inline-block; font-family:var(--at-sans); font-size:.78rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; line-height:1; padding:1.15rem 2.4rem; border-radius:0; text-decoration:none; transition:background .35s ease,color .35s ease,border-color .35s ease; } body .at-btn--ghost{ background:rgba(246,241,232,.16); border:1px solid rgba(246,241,232,.5); color:var(--at-paper); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); } body .at-btn--ghost:hover{background:rgba(246,241,232,.92);border-color:rgba(246,241,232,.92);color:var(--at-ink)} body .at-btn--solid{background:var(--at-oxblood);border:1px solid var(--at-oxblood);color:var(--at-paper)} body .at-btn--solid:hover{background:transparent;color:var(--at-oxblood)} /* Small quiet label: kicker, widget title, legal row. */ body .at-label{ font-family:var(--at-sans); font-size:.72rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; } /* =========================================================================== GLOBAL FOOTER One dark close for every page. Espresso rather than ink, so a page that already ends dark still reads a tonal step down instead of merging. =========================================================================== */ body #main-footer{ /* !important only to retire two legacy rules that still live in Divi > Theme Options > Custom CSS: #main-footer{background:url(...unsplash...)!important} .footer-widget h4{color:white!important} Delete those two and the !important flags here can go with them. See DESIGN-SYSTEM.md section 9. */ background-color:var(--at-espresso)!important; /* Two ramps over one photograph, in paint order (first = on top): 1. a bottom vignette, because the legal strip is pinned to the bottom edge while the diagonal peaks in the SE corner — without this the last link in the strip dissolves into the brightest gold; 2. the NW->SE diagonal. Plain black at falling alpha, NOT a colour multiply: black over the texture is exactly `texture x a`, which keeps the gold's own hue. Blending toward a dark COLOUR desaturates as it darkens and turns the gold grey-brown. Alpha follows a = 0.03 + 0.82t^1.3; the stops sample that curve, since a CSS gradient interpolates linearly and a two-stop ramp reads too flat. Divi's Theme-Options CSS forces background-size/repeat with !important; cover + no-repeat is what a single photographic ground wants anyway. */ background-image: linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,0,0,.30) 82%, rgba(0,0,0,.55) 100%), linear-gradient(135deg, rgba(0,0,0,.970) 0%, rgba(0,0,0,.835) 25%, rgba(0,0,0,.637) 50%, rgba(0,0,0,.407) 75%, rgba(0,0,0,.150) 100%), url("/wp-content/uploads/at-img/at-footer-gold.jpg")!important; background-size:cover!important; background-position:center!important; background-repeat:no-repeat!important; color:var(--at-on-dark); font-family:var(--at-text); } body #main-footer .container{width:88%;max-width:88rem} /* ------------------------------------------------------- footer brandmark */ /* The site name set as a wordmark rather than a widget title: it is the one place in the footer that carries the brand, so it takes the serif at display size and drops the uppercase kicker treatment the other columns use. Every selector here carries `.footer-widget .textwidget`, and it has to: the generic column rules below are `… .footer-widget .textwidget p` and `… .footer-widget a:not(.at-btn)`, which score (1,2,2). A shorter `#main-footer .at-brandmark .at-wordmark` scores (1,2,1) and silently loses — the wordmark renders at body size with no error anywhere. */ /* The brandmark is a wordmark, not running text, so the 24rem reading measure the other columns use would wrap it. Same nth-child(1) the flex ratio uses. */ body #main-footer .footer-widget:nth-child(1) .textwidget{max-width:none} body #main-footer .footer-widget .textwidget .at-wordmark{ font-family:var(--at-serif); font-weight:400; font-size:2.9rem; line-height:1.02; letter-spacing:-.015em; color:var(--at-paper); margin:0; } body #main-footer .footer-widget .textwidget .at-claim{ font-family:var(--at-text); font-style:italic; font-size:1.12rem; line-height:1.4; color:var(--at-stone); margin:.7rem 0 0; } /* Inline SVG, not the 2018 blue PNG: the glyph inherits currentColor and sits in the palette instead of punching a saturated square through the texture. */ body #main-footer .footer-widget .textwidget .at-social{ display:inline-flex; align-items:center; gap:.6rem; margin-top:var(--at-s4); font-family:var(--at-sans); font-size:.72rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--at-stone); text-decoration:none; border-bottom:1px solid rgba(246,241,232,.22); padding-bottom:.45rem; transition:color .3s ease,border-color .3s ease; } body #main-footer .footer-widget .textwidget .at-social:hover{color:var(--at-paper);border-bottom-color:var(--at-paper)} body #main-footer .footer-widget .textwidget .at-social svg{display:block;flex:0 0 auto} /* ---------------------------------------------------------------- widget grid */ /* Divi floats four fixed-width columns and leaves an empty one behind. Grid + :empty lets the row size itself to the widgets that exist. */ /* Flex, not grid: `repeat(auto-fit, …)` hands out more tracks than there are widgets on a wide viewport and parks the columns against the left edge with dead tracks to the right. Flex sizes to the widgets that actually exist. */ body #main-footer #footer-widgets{ display:flex; flex-wrap:wrap; gap:var(--at-s5); padding:var(--at-s5) 0 var(--at-s4); } body #main-footer .footer-widget{ flex:1 1 14rem; width:auto; float:none; margin:0; padding:0; } /* Two blocks: the brandmark carries the left, one widget answers on the right. nth-child counts all four divs Divi prints, so the brandmark is 1 and the remaining widget is 2; the empty tail divs are hidden by :empty below. */ body #main-footer .footer-widget:nth-child(1){flex:1.5 1 20rem} body #main-footer .footer-widget:nth-child(2){flex:1.1 1 16rem} body #main-footer .footer-widget .et_pb_widget{width:auto;float:none;margin:0;padding:0} body #main-footer .footer-widget:empty{display:none} /* Columns fill the row; the reading measure is capped on the text itself. */ body #main-footer .footer-widget .textwidget{max-width:24rem} body #main-footer .footer-widget h4.title{ font-family:var(--at-sans); font-size:.72rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--at-stone)!important; /* legacy .footer-widget h4{color:white!important} */ margin:0 0 var(--at-s3); padding:0; line-height:1.2; } body #main-footer .footer-widget .textwidget p{ font-family:var(--at-text); font-size:.95rem; line-height:1.7; color:var(--at-on-dark); margin:0 0 var(--at-s3); padding:0; } body #main-footer .footer-widget .textwidget p:last-child{margin-bottom:0} body #main-footer .footer-widget a:not(.at-btn){ color:var(--at-paper); text-decoration:none; border-bottom:1px solid rgba(246,241,232,.28); padding-bottom:1px; transition:border-color .3s ease; } body #main-footer .footer-widget a:not(.at-btn):hover{border-bottom-color:var(--at-paper)} /* Social mark: it is a white PNG, so tone it down rather than recolour it. */ body #main-footer .footer-widget .textwidget img{ width:2.4rem; height:auto; margin:0; opacity:.6; transition:opacity .3s ease; } body #main-footer .footer-widget .textwidget a:hover img{opacity:1} body #main-footer .footer-widget .textwidget a:has(img){border-bottom:0} body #main-footer .footer-widget .textwidget .aligncenter{margin-left:0;margin-right:0} /* ------------------------------------------------------------- legal strip */ /* Divi splits the menu and the credits into two blocks. One hairline above the pair makes them read as a single quiet line rather than two rows. */ body #main-footer #et-footer-nav{ background:transparent; border-top:1px solid var(--at-hairline); } body #main-footer #et-footer-nav .container{padding:var(--at-s4) 0 0} body #main-footer .bottom-nav{padding:0;font-size:0} body #main-footer .bottom-nav li{padding-right:var(--at-s4);float:none;display:inline-block} body #main-footer .bottom-nav li:last-child{padding-right:0} body #main-footer .bottom-nav a, body #main-footer #footer-info, body #main-footer #footer-info a{ font-family:var(--at-sans); font-size:.68rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--at-taupe); text-decoration:none; line-height:1.9; } body #main-footer .bottom-nav a:hover, body #main-footer #footer-info a:hover{color:var(--at-paper);opacity:1} /* Divi centres both rows below 980px. The footer reads as one left-aligned column at every width, so pin them back. */ body #main-footer .bottom-nav, body #main-footer #footer-info{text-align:left} body #main-footer #footer-bottom{background:transparent;padding:0} body #main-footer #footer-bottom .container{padding:.4rem 0 var(--at-s5)} body #main-footer #footer-info{float:none;padding:0;display:block} body #main-footer #footer-info a{margin-left:var(--at-s3)} /* ------------------------------------------------------------------ mobile */ @media (max-width:980px){ body #main-footer #footer-widgets{ grid-template-columns:1fr; gap:var(--at-s4); padding:var(--at-s5) 0 var(--at-s4); } /* Beat the :nth-child flex ratios above — those carry a pseudo-class, so a bare .footer-widget selector inside this query is NOT specific enough. */ body #main-footer .footer-widget, body #main-footer .footer-widget:nth-child(1), body #main-footer .footer-widget:nth-child(2){flex:1 1 100%} body #main-footer .footer-widget .textwidget{max-width:none} /* One column, so the diagonal runs top-to-bottom instead of corner-to-corner and the footer grows tall: pull the wordmark back and lift the floor. */ body #main-footer .footer-widget .textwidget .at-wordmark{font-size:2.1rem} body #main-footer .footer-widget .textwidget .at-claim{font-size:1rem} body #main-footer .footer-widget .textwidget .at-social{margin-top:var(--at-s3)} body #main-footer #et-footer-nav .container{padding:var(--at-s3) 0 0} body #main-footer .bottom-nav li{padding-right:var(--at-s3)} body #main-footer #footer-info a{margin-left:var(--at-s2)} body .at-btn{padding:1.05rem 1.6rem;font-size:.72rem;letter-spacing:.14em} } /* ------------------------------------------------------- portrait (global) */ /* A byline-scale headshot that sits above a bio. Component, not page CSS, so it is declared here rather than in a page block. */ body .at-portrait{max-width:13rem} body .at-portrait .et_pb_image_wrap{display:block} body .at-portrait img{display:block;width:100%;height:auto;border-radius:0} @media (max-width:980px){ body .at-portrait{max-width:10rem} }