/* ============================================================================ wizarding.css - dark academia / wizarding-school restyle Loaded LAST. Nothing above this file is edited; everything here overrides. !important appears ONLY where an inline style attribute in index.html makes it unavoidable. Those rules are tagged with the word INLINE in a comment. ========================================================================= */ /* --------------------------------------------------------------------------- 1. PALETTE Swap the whole look by replacing the five values in :root. --gilt is DECORATION ONLY (rules, rims, filigree). It measures 1.94:1 on parchment, so it can never carry text. --gilt-text is its readable twin. ------------------------------------------------------------------------ */ :root{ --ink: #1c1712; /* body text 14.4:1 on parchment */ --parchment: #efe4cf; /* aged paper */ --accent: #7b1c22; /* crimson 8.2:1 on parchment */ --gilt: #c9a227; /* antique gold - decoration only */ --shadow: rgba(28,23,18,.35); --gilt-text: #7a5c0e; /* readable gilt 4.95:1 on parchment */ /* derived - leave alone when swapping palettes */ --ink-soft: #3f352b; /* 9.6:1 on parchment */ --parchment-hi: #f7efe0; --parchment-lo: #e2d4b9; --parchment-dim: #b9ac95; /* 7.8:1 on night */ --night: #14100c; /* stone / sky ground */ --night-hi: #241d16; --gilt-veil: rgba(201,162,39,.55); --gilt-mist: rgba(201,162,39,.18); --font-head: 'Cinzel','Trajan Pro','Times New Roman',serif; --font-body: 'EB Garamond',Garamond,'Palatino Linotype',Georgia,serif; --font-black: 'New York Post','Engravers Old English',var(--font-head); } /* --- ALTERNATE PALETTES - uncomment ONE block to swap -------------------- */ /* emerald / silver :root{ --ink:#141a16; --parchment:#e9e6dd; --accent:#1e4d3b; --gilt:#b9bcc0; --shadow:rgba(20,26,22,.35); --gilt-text:#55595e; --ink-soft:#333c36; --parchment-hi:#f4f2ec; --parchment-lo:#d5d1c3; --parchment-dim:#a8ada6; --night:#0e1512; --night-hi:#1a241f; --gilt-veil:rgba(185,188,192,.55); --gilt-mist:rgba(185,188,192,.18); } */ /* navy / bronze :root{ --ink:#12161f; --parchment:#e8e4da; --accent:#1b2a4a; --gilt:#a9743f; --shadow:rgba(18,22,31,.35); --gilt-text:#6d4a22; --ink-soft:#2e3542; --parchment-hi:#f3f0e9; --parchment-lo:#d3cdbd; --parchment-dim:#a9a494; --night:#0d1119; --night-hi:#1a2130; --gilt-veil:rgba(169,116,63,.55); --gilt-mist:rgba(169,116,63,.18); } */ /* amber / charcoal :root{ --ink:#1a1815; --parchment:#f1e9d8; --accent:#8a5a12; --gilt:#57544e; --shadow:rgba(26,24,21,.35); --gilt-text:#4a4741; --ink-soft:#3c3830; --parchment-hi:#f9f3e6; --parchment-lo:#e0d4b8; --parchment-dim:#b3ad9e; --night:#17140f; --night-hi:#26221b; --gilt-veil:rgba(87,84,78,.55); --gilt-mist:rgba(87,84,78,.18); } */ /* --------------------------------------------------------------------------- 2. INLINE-SVG ASSETS (no image files, no external requests) Each is a data-URI SVG. The flourish and arch are used as MASKS so that `background-color: currentColor` shows through and they inherit colour. ------------------------------------------------------------------------ */ :root{ /* feTurbulence paper grain - static, never animated, zero runtime cost */ --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23g)'/%3E%3C/svg%3E"); /* symmetrical filigree flourish, 200x24, used as a mask */ --flourish: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='24' viewBox='0 0 200 24'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M100 2l5 10-5 10-5-10zM92 11H60q-12-5-20 1 8 6 20 1h32zM108 11h32q12-5 20 1-8 6-20 1h-32zM34 12a4 4 0 1 1-8 0 4 4 0 0 1 8 0zm-2 0a2 2 0 1 0-4 0 2 2 0 0 0 4 0zM174 12a4 4 0 1 1-8 0 4 4 0 0 1 8 0zm-2 0a2 2 0 1 0-4 0 2 2 0 0 0 4 0zM18.4 12a1.7 1.7 0 1 1-3.4 0 1.7 1.7 0 0 1 3.4 0zM185 12a1.7 1.7 0 1 1 3.4 0 1.7 1.7 0 0 1-3.4 0z'/%3E%3C/svg%3E"); /* gothic pointed (lancet) arch frame, 200x64, evenodd ring, used as a mask */ --arch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='64' viewBox='0 0 200 64' preserveAspectRatio='none'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M0 64V36Q3 6 100 0q97 6 100 36v28h-2V36.6Q195 8.6 100 2.6 5 8.6 2 36.6V64z'/%3E%3C/svg%3E"); /* starfield - two tiles, 26 circles each = 52 stars, varied r and opacity */ --stars-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cg fill='%23fdf3dd'%3E%3Ccircle cx='18' cy='42' r='1.1' opacity='.70'/%3E%3Ccircle cx='63' cy='17' r='.8' opacity='.45'/%3E%3Ccircle cx='96' cy='88' r='1.4' opacity='.85'/%3E%3Ccircle cx='131' cy='36' r='.7' opacity='.40'/%3E%3Ccircle cx='152' cy='124' r='1' opacity='.60'/%3E%3Ccircle cx='187' cy='58' r='1.2' opacity='.75'/%3E%3Ccircle cx='211' cy='150' r='.8' opacity='.50'/%3E%3Ccircle cx='243' cy='26' r='1.5' opacity='.90'/%3E%3Ccircle cx='268' cy='96' r='.9' opacity='.55'/%3E%3Ccircle cx='297' cy='142' r='1.1' opacity='.65'/%3E%3Ccircle cx='332' cy='54' r='.7' opacity='.40'/%3E%3Ccircle cx='358' cy='118' r='1.3' opacity='.80'/%3E%3Ccircle cx='382' cy='30' r='.9' opacity='.50'/%3E%3Ccircle cx='24' cy='168' r='1' opacity='.60'/%3E%3Ccircle cx='57' cy='214' r='1.2' opacity='.70'/%3E%3Ccircle cx='88' cy='262' r='.8' opacity='.45'/%3E%3Ccircle cx='119' cy='196' r='1.4' opacity='.85'/%3E%3Ccircle cx='146' cy='286' r='.9' opacity='.55'/%3E%3Ccircle cx='178' cy='232' r='1.1' opacity='.65'/%3E%3Ccircle cx='204' cy='314' r='.7' opacity='.40'/%3E%3Ccircle cx='236' cy='258' r='1.3' opacity='.80'/%3E%3Ccircle cx='262' cy='340' r='1' opacity='.60'/%3E%3Ccircle cx='291' cy='214' r='.8' opacity='.45'/%3E%3Ccircle cx='318' cy='296' r='1.2' opacity='.75'/%3E%3Ccircle cx='344' cy='246' r='.9' opacity='.50'/%3E%3Ccircle cx='376' cy='352' r='1.1' opacity='.65'/%3E%3C/g%3E%3C/svg%3E"); --stars-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cg fill='%23f6e7c4'%3E%3Ccircle cx='38' cy='76' r='.9' opacity='.50'/%3E%3Ccircle cx='72' cy='142' r='1.3' opacity='.80'/%3E%3Ccircle cx='108' cy='22' r='.7' opacity='.40'/%3E%3Ccircle cx='140' cy='108' r='1' opacity='.60'/%3E%3Ccircle cx='168' cy='64' r='1.2' opacity='.70'/%3E%3Ccircle cx='196' cy='178' r='.8' opacity='.45'/%3E%3Ccircle cx='228' cy='92' r='1.4' opacity='.85'/%3E%3Ccircle cx='254' cy='148' r='.9' opacity='.55'/%3E%3Ccircle cx='284' cy='44' r='1.1' opacity='.65'/%3E%3Ccircle cx='312' cy='124' r='.7' opacity='.40'/%3E%3Ccircle cx='346' cy='182' r='1.2' opacity='.75'/%3E%3Ccircle cx='372' cy='88' r='1' opacity='.60'/%3E%3Ccircle cx='14' cy='236' r='1.3' opacity='.80'/%3E%3Ccircle cx='46' cy='308' r='.8' opacity='.45'/%3E%3Ccircle cx='78' cy='368' r='1.1' opacity='.65'/%3E%3Ccircle cx='112' cy='324' r='.9' opacity='.50'/%3E%3Ccircle cx='144' cy='378' r='1.2' opacity='.70'/%3E%3Ccircle cx='172' cy='268' r='.7' opacity='.40'/%3E%3Ccircle cx='206' cy='352' r='1' opacity='.60'/%3E%3Ccircle cx='238' cy='296' r='1.3' opacity='.80'/%3E%3Ccircle cx='272' cy='384' r='.8' opacity='.45'/%3E%3Ccircle cx='306' cy='248' r='1.1' opacity='.65'/%3E%3Ccircle cx='334' cy='332' r='.9' opacity='.55'/%3E%3Ccircle cx='362' cy='286' r='1.2' opacity='.75'/%3E%3Ccircle cx='392' cy='232' r='.7' opacity='.40'/%3E%3Ccircle cx='20' cy='124' r='1' opacity='.60'/%3E%3C/g%3E%3C/svg%3E"); } /* --------------------------------------------------------------------------- 3. GROUND + PAGE SURFACE ------------------------------------------------------------------------ */ html{ -webkit-text-size-adjust:100%; } body{ font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.65; color: var(--ink); background-color: var(--night); background-image: radial-gradient(ellipse 80% 55% at 50% -10%, rgba(201,162,39,.10), transparent 70%), radial-gradient(ellipse 60% 40% at 8% 30%, rgba(123,28,34,.16), transparent 72%), radial-gradient(ellipse 55% 45% at 95% 72%, rgba(123,28,34,.12), transparent 72%), linear-gradient(178deg, var(--night-hi), var(--night) 45%, #0d0a07); background-attachment: fixed; overflow-x: hidden; } /* The main card is the "page". Its inline style sets background-COLOR only, so background-image layers below apply with no !important needed. */ .container.mt-5 > .card{ background-color: var(--parchment) !important; /* INLINE #E2DCD3 */ color: var(--ink) !important; /* INLINE #332222 */ letter-spacing: normal !important; /* INLINE .75px */ font-family: var(--font-body) !important; /* INLINE serif */ background-image: var(--grain), radial-gradient(ellipse 70% 50% at 18% 8%, rgba(255,255,255,.55), transparent 60%), radial-gradient(ellipse 60% 45% at 85% 92%, rgba(255,255,255,.38), transparent 62%), radial-gradient(ellipse 90% 70% at 50% 50%, transparent 42%, rgba(122,92,14,.10) 88%), linear-gradient(163deg, var(--parchment-hi), var(--parchment) 38%, var(--parchment-lo)); background-size: 260px 260px, auto, auto, auto, auto; background-blend-mode: soft-light, normal, normal, normal, normal; /* soft inner shadow so it reads as a sheet of paper, not a div */ box-shadow: inset 0 0 2px rgba(255,255,255,.7), inset 0 0 34px rgba(122,92,14,.13), inset 0 0 120px rgba(28,23,18,.10), 0 2px 4px rgba(0,0,0,.28), 0 22px 60px -12px rgba(0,0,0,.55) !important; /* INLINE box-shadow */ border: 1px solid var(--gilt-veil) !important; /* INLINE border-0 */ position: relative; isolation: isolate; z-index: 0; } /* Content column ~68ch, centred, without touching the grid. Applied to prose only so Bootstrap's row/col maths is left intact. */ .container.mt-5 > .card p{ max-width: 68ch; margin-left: auto; margin-right: auto; color: var(--ink); line-height: 1.65; } /* --------------------------------------------------------------------------- 4. TYPOGRAPHY Every rule here fights an inline font-family / font-size, hence !important. All sizes become clamp() so the page survives down to 360px. ------------------------------------------------------------------------ */ h1,h2,h3,h4,h5,h6, .section-title,.section-subtitle{ font-family: var(--font-head); letter-spacing: .055em; font-weight: 600; line-height: 1.22; color: var(--ink); } /* --- masthead: time + date line (16pt inline) --- */ .no-gutters > .col-md-6 > h1.text-left, .no-gutters > .col-md-6 > h1.text-right{ font-family: var(--font-head) !important; /* INLINE Serif */ font-size: clamp(.82rem, 2.9vw, 1.05rem) !important;/* INLINE 16pt */ letter-spacing: .16em; text-transform: uppercase; color: var(--gilt-text); margin-bottom: .35rem; } /* --- the couple's names (36pt inline) --- */ h1.mb-n2.display-1{ font-family: var(--font-head) !important; /* INLINE Serif */ font-size: clamp(1.55rem, 6.6vw, 2.9rem) !important;/* INLINE 36pt */ letter-spacing: .1em; text-align: center !important; /* INLINE text-left */ text-transform: uppercase; color: var(--accent); border-color: var(--gilt) !important; /* INLINE currentColor */ padding: .5rem 0; } /* --- the quotation (20pt inline) --- */ h1.display-3{ font-family: var(--font-body) !important; /* INLINE Serif */ font-size: clamp(.98rem, 3.4vw, 1.35rem) !important;/* INLINE 20pt */ font-style: italic; letter-spacing: .01em; line-height: 1.6; text-align: center !important; /* INLINE text-left */ color: var(--ink-soft); border-color: var(--gilt-veil) !important; /* INLINE currentColor */ padding: 1rem .6rem; } /* --- panel headings: Feliz Pareja / Vestimenta / Mira nuestra historia --- */ h1.text-center.pb-2.mx-3.mb-3{ font-family: var(--font-head) !important; /* INLINE Serif */ font-size: clamp(1.2rem, 4vw, 1.75rem) !important; /* INLINE 24pt/18pt/10pt */ letter-spacing: .13em; text-transform: uppercase; color: var(--accent); border-bottom-color: var(--gilt) !important; /* INLINE currentColor */ border-bottom-width: 1px !important; /* INLINE 2px */ padding-bottom: .7rem !important; } /* --- "Lugar de la boda" strip under the masthead --- */ .py-1.mb-5 h3{ font-family: var(--font-head) !important; /* INLINE font-size 20px */ font-size: clamp(.78rem, 2.7vw, 1rem) !important; letter-spacing: .18em; text-transform: uppercase; color: var(--parchment); margin: 0; } /* --- shared section headings --- */ .section-title{ font-family: var(--font-head); font-size: clamp(1.7rem, 5.6vw, 2.8rem); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); } .section-subtitle{ font-family: var(--font-head); font-size: clamp(1.35rem, 4.8vw, 2.15rem); letter-spacing: .14em; text-transform: uppercase; color: var(--gilt-text); } #note .section-title[style]{ font-size: clamp(1.4rem, 5vw, 2.1rem) !important; /* INLINE 30px */ } p{ color: var(--ink); } b, strong{ color: var(--ink); font-weight: 600; } /* solid arch silhouette, used to fill the crown above each panel */ :root{ --arch-solid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='64' viewBox='0 0 200 64' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0 64V36Q3 6 100 0q97 6 100 36v28z'/%3E%3C/svg%3E"); } /* --------------------------------------------------------------------------- 5. HERO - the enchanted ceiling The masthead block becomes a night sky. Its inline 4px borders resolve to currentColor, so setting `color` here turns them gilt with no !important. ------------------------------------------------------------------------ */ .py-1.mb-5{ position: relative; isolation: isolate; overflow: hidden; color: var(--gilt); padding: 2.2rem .9rem 1.9rem; background-color: var(--night); background-image: radial-gradient(ellipse 85% 65% at 50% 122%, rgba(201,162,39,.26), transparent 64%), radial-gradient(ellipse 75% 60% at 50% -25%, rgba(58,44,92,.42), transparent 72%), linear-gradient(180deg, #0a0711, #14100c 58%, #1c1409); box-shadow: inset 0 0 70px rgba(0,0,0,.65); } /* two star layers, 26 circles each, drifting at different rates */ .py-1.mb-5::before, .py-1.mb-5::after{ content: ''; position: absolute; top: 0; left: 0; width: calc(100% + 400px); height: calc(100% + 400px); z-index: -1; pointer-events: none; background-repeat: repeat; background-size: 400px 400px; } .py-1.mb-5::before{ background-image: var(--stars-a); opacity: .90; } .py-1.mb-5::after { background-image: var(--stars-b); opacity: .62; } /* masthead title - blackletter kept, size made responsive */ .py-1.mb-5 .display-1{ font-family: var(--font-black) !important; /* INLINE New York Post */ font-size: clamp(2rem, 10.5vw, 5.4rem) !important; /* INLINE 72pt */ line-height: 1.04; letter-spacing: .02em; color: var(--gilt); margin: 0; text-shadow: 0 0 26px rgba(201,162,39,.45), 0 2px 0 rgba(0,0,0,.6); } /* --------------------------------------------------------------------------- 6. CANDLE GLOWS - three, staggered. Radial gradients, no blur filter. ------------------------------------------------------------------------ */ .container.mt-5 > .card::before, .container.mt-5 > .card::after, #footer::before{ content: ''; position: absolute; z-index: -1; pointer-events: none; border-radius: 50%; opacity: .6; background: radial-gradient(circle closest-side, rgba(255,196,84,.34), rgba(201,162,39,.16) 46%, transparent 72%); } .container.mt-5 > .card::before{ top: 6%; left: 0; width: 44%; padding-bottom: 44%; } .container.mt-5 > .card::after { top: 44%; right: 0; width: 38%; padding-bottom: 38%; } #footer::before{ bottom: 4%; left: 50%; width: 62%; padding-bottom: 30%; transform: translateX(-50%); } /* --------------------------------------------------------------------------- 7. SECTION DIVIDERS - filigree flourish, inherits currentColor via mask ------------------------------------------------------------------------ */ .col-12.mt-4.mb-3.pt-2{ position: relative; color: var(--accent); border-bottom-width: 1px !important; /* INLINE 3px */ border-bottom-color: var(--gilt-veil) !important; /* INLINE currentColor */ margin-bottom: 2.2rem !important; } .col-12.mt-4.mb-3.pt-2::before{ /* parchment gap so the rule breaks */ content: ''; position: absolute; left: 50%; bottom: -13px; width: 214px; max-width: 66%; height: 26px; transform: translateX(-50%); background: var(--parchment); } .col-12.mt-4.mb-3.pt-2::after{ /* the flourish itself */ content: ''; position: absolute; left: 50%; bottom: -12px; width: 200px; max-width: 60%; height: 24px; transform: translateX(-50%); background-color: currentColor; -webkit-mask: var(--flourish) center / contain no-repeat; mask: var(--flourish) center / contain no-repeat; } /* a smaller flourish under the shared section headings */ .section-title{ position: relative; padding-bottom: 1.6rem; } .section-title::after{ content: ''; position: absolute; left: 50%; bottom: .35rem; width: 168px; max-width: 58%; height: 20px; transform: translateX(-50%); background-color: var(--gilt); -webkit-mask: var(--flourish) center / contain no-repeat; mask: var(--flourish) center / contain no-repeat; } /* --------------------------------------------------------------------------- 8. PANELS - gilt hairline + gothic pointed-arch crown The arch is drawn above the panel; the panel's own top border is removed so the arch rails run straight into the side borders. ------------------------------------------------------------------------ */ .card.rounded-0.p-1{ position: relative; margin-top: 58px; background-color: rgba(247,239,224,.5) !important; /* INLINE transparent */ border: 1px solid var(--gilt) !important; /* INLINE 1px solid */ border-top: 0 !important; box-shadow: 0 14px 34px -18px var(--shadow), inset 0 0 46px rgba(122,92,14,.08); } .card.rounded-0.p-1::before{ /* arch interior fill */ content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 58px; background: rgba(247,239,224,.5); -webkit-mask: var(--arch-solid) center / 100% 100% no-repeat; mask: var(--arch-solid) center / 100% 100% no-repeat; pointer-events: none; } .card.rounded-0.p-1::after{ /* arch frame, evenodd ring */ content: ''; position: absolute; left: -1px; right: -1px; bottom: 100%; height: 58px; background-color: var(--gilt); -webkit-mask: var(--arch) center / 100% 100% no-repeat; mask: var(--arch) center / 100% 100% no-repeat; pointer-events: none; } /* inner frame of each panel */ .card.rounded-0.p-1 > .py-3.px-4{ border-width: 1px !important; /* INLINE 2px */ border-color: var(--gilt-veil) !important; /* INLINE currentColor */ } /* --------------------------------------------------------------------------- 9. DROP CAPS (~3 lines, 2 lines below 576px) The document contains no
elements, so these are anchored to the four prose blocks that stand in for them. ------------------------------------------------------------------------ */ .col-lg-4 .card.rounded-0.p-1 .py-3 > div > p:first-of-type::first-letter, #gift .text p:first-of-type::first-letter{ float: left; font-family: var(--font-head); font-weight: 700; font-size: 5.6em; line-height: .76; padding: .04em .07em 0 0; margin: .02em .04em 0 0; color: var(--gilt-text); text-shadow: 0 1px 0 rgba(255,255,255,.55); } /* a floated cap needs ranged text to sit against */ #gift .text p:first-of-type{ text-align: left; max-width: 68ch; margin-left: auto; margin-right: auto; } /* --------------------------------------------------------------------------- 10. IMAGES ------------------------------------------------------------------------ */ .fotoCirculo{ /* border-radius:50% is pre-existing; vestidos.png is tall, so it reads as an oval. A faint hairline flatters both without shouting about the shape. */ border: 1px solid var(--gilt-veil); box-shadow: 0 10px 26px -14px var(--shadow); } /* #gallery: the img carries no class the sheets target, so it laid out at its natural 1841x739 and was clipped by .contenedor's overflow. Ranging it to the column keeps the landscape crop the photo was made for. */ #gallery img{ display: block; width: 100%; max-width: 100%; height: auto; margin: 0 auto; } /* cover photograph */ .card.mt-3.mt-lg-0.border-0{ border: 1px solid var(--gilt) !important; /* INLINE border-0 */ box-shadow: inset 0 0 90px rgba(20,16,12,.55), inset 0 0 0 6px rgba(239,228,207,.14), 0 18px 44px -20px var(--shadow); } .when-where .img img{ border: 1px solid var(--gilt); box-shadow: 0 14px 32px -16px var(--shadow); } /* --------------------------------------------------------------------------- 11. WAX-SEAL BUTTON (a.maps-btn is the only button in the document) Kept wide rather than circular so the "Google Maps" label survives; the rim, radial pour and emboss are the seal. ------------------------------------------------------------------------ */ #whenwhere .cont-list a.maps-btn, #whenwhere .cont-list a.maps-btn:link, #whenwhere .cont-list a.maps-btn:visited{ padding: 14px 30px; border: 2px solid var(--gilt); border-radius: 999px; color: var(--parchment-hi); font-family: var(--font-head); font-size: clamp(.68rem, 2.4vw, .8rem); font-weight: 600; letter-spacing: .18em; background: radial-gradient(circle at 30% 24%, rgba(255,255,255,.22), transparent 46%), radial-gradient(circle at 50% 44%, #97242c, var(--accent) 44%, #5c1217 82%, #450e12); box-shadow: inset 0 1px 0 rgba(255,255,255,.30), inset 0 -4px 10px rgba(0,0,0,.48), inset 0 0 0 4px rgba(201,162,39,.16), 0 7px 16px -4px var(--shadow); text-shadow: 0 1px 2px rgba(0,0,0,.5); transition: box-shadow .25s ease, transform .12s ease, filter .25s ease; } #whenwhere .cont-list a.maps-btn:hover, #whenwhere .cont-list a.maps-btn:focus{ color: var(--parchment-hi); background: radial-gradient(circle at 30% 24%, rgba(255,255,255,.28), transparent 46%), radial-gradient(circle at 50% 44%, #a62a33, #8b2028 44%, #661419 82%, #4c1015); border-color: var(--gilt); box-shadow: inset 0 1px 0 rgba(255,255,255,.34), inset 0 -4px 10px rgba(0,0,0,.44), inset 0 0 0 4px rgba(201,162,39,.26), 0 10px 22px -6px var(--shadow), 0 0 22px rgba(201,162,39,.30); } #whenwhere .cont-list a.maps-btn:focus-visible{ outline: 2px solid var(--gilt-text); outline-offset: 3px; } #whenwhere .cont-list a.maps-btn:active{ transform: translateY(2px) scale(.985); box-shadow: inset 0 2px 6px rgba(0,0,0,.55), inset 0 0 0 4px rgba(201,162,39,.12), 0 2px 6px -2px var(--shadow); } #whenwhere .cont-list a.maps-btn i{ color: var(--gilt); } /* --------------------------------------------------------------------------- 12. COUNTDOWN - photo scrim css/style.css is not linked, so the original [data-overlay-dark] scrim never loads and white text sat directly on the photograph. This restores it. ------------------------------------------------------------------------ */ #countdown{ position: relative; isolation: isolate; overflow: hidden; border: 1px solid var(--gilt); padding: 2.4rem 1rem; box-shadow: 0 20px 46px -24px var(--shadow), inset 0 0 60px rgba(0,0,0,.5); } #countdown::before{ content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background: radial-gradient(ellipse 82% 72% at 50% 42%, rgba(20,16,12,.60), rgba(20,16,12,.89) 76%), linear-gradient(180deg, rgba(10,7,17,.45), rgba(28,20,9,.45)); } #countdown .section-head h2{ font-family: var(--font-head); font-size: clamp(1.5rem, 5.6vw, 2.6rem); letter-spacing: .16em; text-transform: uppercase; color: var(--gilt); text-shadow: 0 0 20px rgba(201,162,39,.35); } #countdown li{ font-family: var(--font-head); font-size: clamp(.6rem, 2.2vw, .72rem); letter-spacing: .12em; color: var(--parchment); padding: 8px 5px; line-height: 1.5; } #countdown li span{ font-family: var(--font-head); font-size: clamp(1.9rem, 9vw, 4rem); font-weight: 600; letter-spacing: .01em; color: var(--gilt); margin-bottom: .25rem; text-shadow: 0 2px 14px rgba(0,0,0,.6); } /* --------------------------------------------------------------------------- 13. BANNER ------------------------------------------------------------------------ */ #banner{ position: relative; isolation: isolate; overflow: hidden; opacity: 1 !important; /* INLINE opacity:80% also dimmed the text */ border: 1px solid var(--gilt); box-shadow: 0 20px 46px -24px var(--shadow), inset 0 0 70px rgba(0,0,0,.5); } #banner::before{ content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background: radial-gradient(ellipse 80% 70% at 50% 46%, rgba(20,16,12,.56), rgba(20,16,12,.88) 76%), linear-gradient(180deg, rgba(10,7,17,.42), rgba(28,20,9,.42)); } #banner .section-head{ margin-bottom: 56px; } #banner .section-head h2{ font-family: var(--font-head); font-size: clamp(1.75rem, 6.6vw, 3.2rem); letter-spacing: .14em; text-transform: uppercase; color: var(--gilt); margin-top: 56px; text-shadow: 0 0 24px rgba(201,162,39,.36); } #banner .section-head h1{ font-family: var(--font-head); font-size: clamp(1.15rem, 4.4vw, 2.1rem); letter-spacing: .3em; color: var(--parchment); } /* --------------------------------------------------------------------------- 14. RSVP ------------------------------------------------------------------------ */ #rsvp{ position: relative; isolation: isolate; overflow: hidden; border: 1px solid var(--gilt); box-shadow: 0 20px 46px -24px var(--shadow); } #rsvp::before{ content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background: radial-gradient(ellipse 80% 74% at 50% 46%, rgba(20,16,12,.42), rgba(20,16,12,.74) 78%); } .rsvp-box{ background: rgba(239,228,207,.94); border: 1px solid var(--gilt); box-shadow: 0 20px 44px -18px rgba(0,0,0,.6), inset 0 0 34px rgba(122,92,14,.10); } .rsvp h2, .rsvp-box h2{ font-family: var(--font-head); font-size: clamp(1.05rem, 4vw, 1.55rem); letter-spacing: .14em; color: var(--accent); } /* --------------------------------------------------------------------------- 15. WHEN & WHERE Retires the hardcoded #b08c3e (2.5:1 on parchment) and #666 (4.56:1). ------------------------------------------------------------------------ */ .when-where .content .date h3{ font-family: var(--font-head); font-size: clamp(2.3rem, 8.6vw, 3.9rem); color: var(--accent); } .when-where .content .date h6{ font-family: var(--font-head); letter-spacing: .16em; color: var(--gilt-text); } .when-where .content .cont h4{ font-family: var(--font-head); font-size: clamp(1.25rem, 4.4vw, 1.95rem); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); } .when-where .content .info h6{ font-family: var(--font-head); letter-spacing: .18em; color: var(--gilt-text); } .when-where .content .cont .cont-list li .icon span, .when-where .content .cont .cont-list li > i{ color: var(--gilt-text); } .when-where .content .cont .cont-list li .text p{ font-family: var(--font-body); font-size: 1.02rem; color: var(--ink-soft); } .when-where .content .cont .cont-list li .text p a{ color: var(--gilt-text); } /* --------------------------------------------------------------------------- 16. GIFT REGISTRY + NOTES ------------------------------------------------------------------------ */ .gift-registry{ border: 3px double var(--gilt); padding: 2rem 1rem 1.2rem; background: rgba(247,239,224,.42); box-shadow: inset 0 0 54px rgba(122,92,14,.08); } .gift-registry h6{ font-family: var(--font-head); font-size: clamp(.8rem, 3vw, .95rem); letter-spacing: .16em; text-transform: uppercase; color: var(--gilt-text); } .gift-registry p{ color: var(--ink-soft); } .gift-registry a{ color: var(--gilt-text); } /* --------------------------------------------------------------------------- 17. FOOTER - #666 on #1b1b1b measured 3.0:1 and failed AA ------------------------------------------------------------------------ */ #footer{ position: relative; isolation: isolate; background-color: var(--night); background-image: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(201,162,39,.10), transparent 66%), linear-gradient(180deg, #100c08, #14100c 42%, #0b0806); border-top: 1px solid var(--gilt-veil); } .top-footer{ padding: 88px 0 0 0; } .top-footer h2{ font-family: var(--font-head); font-size: clamp(1.75rem, 6vw, 2.9rem); letter-spacing: .12em; text-transform: uppercase; color: var(--parchment-hi); } .top-footer h2 span small{ color: var(--gilt); } .top-footer h6{ font-family: var(--font-head); letter-spacing: .18em; color: var(--parchment-dim); } .sub-footer{ border-top: 1px solid rgba(201,162,39,.16); } .sub-footer p{ font-family: var(--font-body); font-size: 1rem; color: var(--parchment-dim); /* was #666 = 3.0:1 */ } #footer a{ color: var(--gilt); } #footer a:hover, #footer a:focus{ color: var(--parchment-hi); } /* --------------------------------------------------------------------------- 19. FOCUS + LONG-STRING SAFETY ------------------------------------------------------------------------ */ a:focus-visible, [tabindex]:focus-visible{ outline: 2px solid var(--gilt-text); outline-offset: 2px; } .container.mt-5 > .card{ overflow-wrap: break-word; } /* --------------------------------------------------------------------------- 20. RESPONSIVE - holds to 360px ------------------------------------------------------------------------ */ /* When & Where uses display:table-cell, which builds an anonymous table that refuses to shrink below its content width - the source page already overflowed 360px by 33px because of it. Dropping to block layout removes the cause. */ @media (max-width: 767.98px){ .when-where .content{ display: block; padding: 0 12px; margin-top: 26px; } .when-where .content .date, .when-where .content .cont{ display: block; width: auto; padding-left: 0; } .when-where .content .date{ margin-bottom: .4rem; } .when-where .content .cont .cont-list li.maps-item{ padding-left: 0; } #whenwhere .cont-list a.maps-btn{ padding: 12px 18px; letter-spacing: .1em; white-space: normal; max-width: 100%; } .when-where .img img{ width: 100%; } } @media (max-width: 575.98px){ body{ font-size: 1rem; } .container.mt-5{ padding-left: .6rem; padding-right: .6rem; margin-top: 1.5rem; } .container.mt-5 > .card{ padding-left: 1rem; padding-right: 1rem; } .py-1.mb-5{ padding: 1.5rem .55rem 1.3rem; } .py-1.mb-5 .display-1{ font-size: clamp(1.6rem, 9.5vw, 2.6rem) !important; } .card.rounded-0.p-1{ margin-top: 44px; } .card.rounded-0.p-1::before, .card.rounded-0.p-1::after{ height: 44px; } /* drop caps step down to two lines */ .col-lg-4 .card.rounded-0.p-1 .py-3 > div > p:first-of-type::first-letter, #gift .text p:first-of-type::first-letter{ font-size: 3.9em; line-height: .8; } #countdown{ padding: 1.6rem .35rem; } #countdown li{ padding: 6px 3px; letter-spacing: .07em; } #banner .section-head{ margin-bottom: 32px; } #banner .section-head h2{ margin-top: 32px; } .col-12.mt-4.mb-3.pt-2::before{ width: 162px; } .col-12.mt-4.mb-3.pt-2::after { width: 150px; } .gift-registry{ padding: 1.4rem .7rem 1rem; } .top-footer{ padding: 56px 0 0 0; } } /* --------------------------------------------------------------------------- 21. ATMOSPHERE - every animation lives inside no-preference. Transform and opacity only; nothing here triggers layout. ------------------------------------------------------------------------ */ @keyframes wz-drift-a{ from{ transform: translate3d(0,0,0); } to { transform: translate3d(-400px,-400px,0); } } @keyframes wz-drift-b{ from{ transform: translate3d(0,0,0); } to { transform: translate3d(-400px,400px,0); } } @keyframes wz-flicker{ 0%,100%{ opacity: .48; transform: scale(1); } 50% { opacity: .86; transform: scale(1.06); } } @keyframes wz-flicker-c{ 0%,100%{ opacity: .42; transform: translateX(-50%) scale(1); } 50% { opacity: .80; transform: translateX(-50%) scale(1.07); } } @media (prefers-reduced-motion: no-preference){ /* starfield: two layers, opposite diagonals, seamless at the 400px tile */ .py-1.mb-5::before{ will-change: transform; animation: wz-drift-a 240s linear infinite; } .py-1.mb-5::after{ top: -400px; will-change: transform; animation: wz-drift-b 380s linear infinite; } /* three candle glows, staggered */ .container.mt-5 > .card::before{ will-change: transform, opacity; animation: wz-flicker 4s ease-in-out infinite; } .container.mt-5 > .card::after{ will-change: transform, opacity; animation: wz-flicker 5.2s ease-in-out .9s infinite; } #footer::before{ will-change: transform, opacity; animation: wz-flicker-c 6s ease-in-out 1.8s infinite; } } /* Also silences the pre-existing animate.css entrance effects fired by js/template.js, which was not guarded. */ @media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .animated, .animate-box{ animation: none !important; transition: none !important; } } /* --------------------------------------------------------------------------- 22. RENDER CORRECTIONS (found by screenshotting the built page) ------------------------------------------------------------------------ */ /* The empty spacer divs inside each panel carry an inline 2px currentColor border, which rendered as a heavy black bar. */ .card.rounded-0.p-1 .text-center.pb-2.mx-3.my-3{ border-bottom-width: 1px !important; /* INLINE 2px */ border-bottom-color: var(--gilt-veil) !important; /* INLINE currentColor */ } /* "VESTIMENTA" broke mid-word in the narrow left column. */ .columna-izquierda h1.text-center.pb-2.mx-3.mb-3{ font-size: clamp(.95rem, 2.6vw, 1.4rem) !important; /* INLINE 10pt */ letter-spacing: .08em; overflow-wrap: normal; word-break: keep-all; } /* #whenwhere ends with two spacer divs back to back, so two flourishes stacked. The second is a direct child of #whenwhere; retire it. */ #whenwhere > .col-12.mt-4.mb-3.pt-2{ border-bottom: 0 !important; /* INLINE 3px solid */ margin-bottom: 0 !important; } #whenwhere > .col-12.mt-4.mb-3.pt-2::before, #whenwhere > .col-12.mt-4.mb-3.pt-2::after{ display: none; }