/* ========================================================================== reaganleonardmusic.com — site stylesheet ========================================================================== This is a hand-ported, readable version of the layout system the old Hostinger/Zyro builder generated, so the rebuilt pages render identically. How the layout works (worth knowing before editing a page): • Every content section is a
. It has a .block-background layer (colour, gradient or photo + optional dark overlay) and a .block-layout, which is a CSS GRID. • The grid's rows/columns are defined per block by custom properties in the section's style attribute — one set each for desktop (≥1224px), "small desktop" (920–1224px, rows scale in vw), tablet (361–920px) and mobile (≤360px, rows in vw). The builder computed these from where each element sat on its canvas; they are copied verbatim from the live site. • Each element is a .layout-element placed with --grid-row / --grid-column (desktop) and --m-grid-row / --m-grid-column (≤920px). • Type sizes, colours and spacing are tokens in :root, mirrored from the builder's site-wide style settings. Breakpoints, exactly as the builder used them: ≤ 360px phone (mobile grid, vw rows) 361–920 tablet/phone (mobile grid, px rows) 920–1224 small desktop (desktop grid, vw rows) ≥ 1224 desktop (desktop grid, px rows) Section index 1. Fonts 5. Blocks & layout grid 9. Social icons 2. Tokens 6. Text boxes 10. Video 3. Base / reset 7. Images & gallery 11. Lightbox 4. Header 8. Buttons 12. Custom blocks 13. Embeds / forms ========================================================================== */ /* -------------------------------------------------------------------------- 1. Fonts — Montserrat, self-hosted These are the same static Google-Fonts files the old site served (through Zyro's font proxy), so glyph widths and line wrapping match exactly. Three family names, mirroring what the old site actually had available in each context (so bold/italic fall back the same way): "Montserrat RLM" 400 / 500 / 800 — all site text (bold renders as 800) "Montserrat RLM Cards" 400 / 600 / 700 / 800 — wedding package + corporate cards "Montserrat RLM FAQ" 400 only — FAQ accordion (bold is synthesised, as before) The names are deliberately not "Montserrat": the Elfsight widget injects its own Google "Montserrat" faces, which must not override the site's text. -------------------------------------------------------------------------- */ /* Montserrat RLM */ @font-face { font-family: "Montserrat RLM"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/montserrat-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Montserrat RLM"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/montserrat-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Montserrat RLM"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/montserrat-800-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Montserrat RLM"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/montserrat-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Montserrat RLM"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/montserrat-500-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Montserrat RLM"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/montserrat-800-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Montserrat RLM Cards */ @font-face { font-family: "Montserrat RLM Cards"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/montserrat-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Montserrat RLM Cards"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/montserrat-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Montserrat RLM Cards"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/montserrat-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Montserrat RLM Cards"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/montserrat-800-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Montserrat RLM Cards"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/montserrat-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Montserrat RLM Cards"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/montserrat-600-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Montserrat RLM Cards"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/montserrat-700-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Montserrat RLM Cards"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/montserrat-800-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Montserrat RLM FAQ */ @font-face { font-family: "Montserrat RLM FAQ"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/montserrat-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Montserrat RLM FAQ"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/montserrat-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* -------------------------------------------------------------------------- 2. Design tokens — mirrored from the builder's global style settings -------------------------------------------------------------------------- */ :root { /* "Montserrat RLM" is the self-hosted face (section 1). The family is named distinctly so fonts injected by third-party widgets (Elfsight loads its own "Montserrat" from Google) can never override the site's text metrics. */ --font-primary: "Montserrat RLM", "Montserrat", sans-serif; /* headings */ --font-secondary: "Montserrat RLM", "Montserrat", sans-serif; /* body, nav, buttons */ /* Brand colours (as used in the page data) */ --color-green: rgb(20, 46, 20); /* header, footer band, dark sections */ --color-green-hover: rgb(39, 89, 39); --color-grey-light: rgb(221, 221, 221); /* footer / light sections */ --color-grey-mid: rgb(181, 181, 181); --color-cream: rgb(222, 216, 192); /* primary button */ --color-ink: rgb(35, 35, 35); --color-dark: #1d1e20; /* builder's default text / overlay colour */ /* Headings — desktop size / mobile size */ --h1-font-size: 96px; --h1-m-font-size: 44px; --h1-font-weight: 500; --h1-line-height: 1.12; --h1-letter-spacing: 0.04em; --h2-font-size: 64px; --h2-m-font-size: 36px; --h2-font-weight: 400; --h2-line-height: 1.12; --h2-letter-spacing: 0.04em; --h3-font-size: 48px; --h3-m-font-size: 32px; --h3-font-weight: 400; --h3-line-height: 1.12; --h3-letter-spacing: 0.04em; --h4-font-size: 36px; --h4-m-font-size: 28px; --h4-font-weight: 400; --h4-line-height: 1.12; --h4-letter-spacing: 0.04em; --h5-font-size: 28px; --h5-m-font-size: 24px; --h5-font-weight: 400; --h5-line-height: 1.12; --h5-letter-spacing: normal; --h6-font-size: 20px; --h6-m-font-size: 20px; --h6-font-weight: 800; --h6-line-height: 1.12; --h6-letter-spacing: normal; --h1-font-family: var(--font-primary); --h2-font-family: var(--font-primary); --h3-font-family: var(--font-primary); --h4-font-family: var(--font-primary); --h5-font-family: var(--font-primary); --h6-font-family: var(--font-primary); --h1-font-style: normal; --h2-font-style: normal; --h3-font-style: normal; --h4-font-style: normal; --h5-font-style: normal; --h6-font-style: normal; --h1-text-transform: none; --h2-text-transform: none; --h3-text-transform: none; --h4-text-transform: none; --h5-text-transform: none; --h6-text-transform: none; --h1-text-decoration: none; --h2-text-decoration: none; --h3-text-decoration: none; --h4-text-decoration: none; --h5-text-decoration: none; --h6-text-decoration: none; /* Body text variants */ --body-font-size: 16px; --body-m-font-size: 16px; --body-font-weight: 500; --body-line-height: 1.6; --body-letter-spacing: 0.04em; --body-large-font-size: 18px; --body-large-m-font-size: 18px; --body-large-font-weight: 500; --body-large-line-height: 1.6; --body-large-letter-spacing: 0.04em; --body-small-font-size: 14px; --body-small-m-font-size: 14px; --body-small-font-weight: 500; --body-small-line-height: 1.6; --body-small-letter-spacing: normal; --body-font-family: var(--font-secondary); --body-large-font-family: var(--font-secondary); --body-small-font-family: var(--font-secondary); --body-font-style: normal; --body-large-font-style: normal; --body-small-font-style: normal; --body-text-transform: none; --body-large-text-transform: none; --body-small-text-transform: none; --body-text-decoration: none; --body-large-text-decoration: none; --body-small-text-decoration: none; /* Navigation links */ --nav-link-font-family: var(--font-secondary); --nav-link-font-size: 14px; --nav-link-m-font-size: 14px; --nav-link-font-weight: 400; --nav-link-line-height: 1.2; /* the live header overrode the theme's 500 with 400 */ --nav-link-letter-spacing: normal; --nav-link-text-transform: none; --nav-link-text-decoration: none; --nav-link-font-style: normal; /* Primary button defaults (individual buttons override colour/size inline) */ --grid-button-primary-font-family: var(--font-secondary); --grid-button-primary-font-size: 14px; --grid-button-primary-m-font-size: 14px; --grid-button-primary-font-weight: 800; --grid-button-primary-line-height: 1.25; --grid-button-primary-letter-spacing: 0.12em; --grid-button-primary-padding-x: 28px; --grid-button-primary-padding-y: 16px; --grid-button-primary-m-padding-x: 28px; --grid-button-primary-m-padding-y: 16px; --grid-button-primary-border-radius: 0px; --grid-button-primary-text-transform: none; --grid-button-primary-text-decoration: none; --grid-button-primary-font-style: normal; --grid-button-primary-transition-duration: 0.2s; --grid-button-primary-transition-timing-function: ease-in-out; } /* -------------------------------------------------------------------------- 3. Base / reset (matches the builder's global reset) -------------------------------------------------------------------------- */ *, ::before, ::after { box-sizing: border-box; } * { margin: 0; padding: 0; color: inherit; } html { height: 100%; scroll-behavior: smooth; /* never let mobile browsers inflate text sizes */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { height: 100%; margin: 0; color: var(--color-dark); font-family: var(--font-secondary); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } button { box-shadow: none; background-color: #fff; border: none; outline: none; font-family: var(--font-secondary); } iframe { border-width: 0; } .page { display: flex; flex-direction: column; min-height: 100vh; } .page__blocks { display: flex; flex-direction: column; } /* -------------------------------------------------------------------------- 4. Header — sticky green bar, logo left, links right; hamburger ≤920px -------------------------------------------------------------------------- */ .top-blocks { position: sticky; top: 0; z-index: 18; } .block-header { /* values from the builder's header settings */ --background-color: var(--color-green); --nav-link-text-color: rgb(255, 255, 255); --nav-link-text-color-hover: rgb(255, 255, 255); --padding: 5px 16px 5px 16px; --logo-width: 125px; --logo-height: 83px; --m-logo-width: 100px; --m-logo-height: 67px; --link-spacing: 50px; --element-spacing: 33px; --header-height-mobile: 77px; position: relative; z-index: 18; display: grid; transition: box-shadow 0.15s linear; } .block-header .background { position: absolute; inset: 0; z-index: 13; background-color: var(--background-color); transition: background-color 0.3s ease-in-out; } /* Logo */ .block-header-logo { display: flex; width: var(--logo-width); height: var(--logo-height); cursor: pointer; } .block-header-logo__image { width: 100%; height: 100%; object-fit: contain; vertical-align: middle; } /* Link list (shared by desktop row and mobile dropdown) */ .block-header__nav-links { display: flex; flex-flow: wrap; justify-content: flex-start; column-gap: var(--link-spacing); row-gap: 16px; list-style: none; } .block-header-item { user-select: none; } .item-content-wrapper { display: flex; align-items: center; text-align: left; } .item-content { position: relative; align-self: center; font-family: var(--nav-link-font-family); font-size: var(--nav-link-font-size); font-style: var(--nav-link-font-style); font-weight: var(--nav-link-font-weight); line-height: var(--nav-link-line-height); letter-spacing: var(--nav-link-letter-spacing); text-transform: var(--nav-link-text-transform); text-decoration: var(--nav-link-text-decoration); color: var(--nav-link-text-color); white-space: pre-wrap; cursor: pointer; } /* current page + hover: underline sitting 7px below the text */ .item-content-wrapper--active .item-content, .item-content-wrapper:hover .item-content, .item-content-wrapper:focus .item-content { color: var(--nav-link-text-color-hover, var(--nav-link-text-color)); text-decoration: underline; text-underline-offset: 7px; } /* Desktop layout */ .block-header-layout-desktop { z-index: 18; display: grid; grid-auto-flow: column; grid-template-columns: min-content auto; align-items: center; width: 100%; max-width: 1224px; padding: var(--padding, 24px 0); justify-self: center; } .block-header-layout-desktop .block-header__logo { margin-right: 16px; } .block-header-layout-desktop .block-header__nav-links { justify-content: flex-end; } /* Mobile layout (hidden on desktop) */ .block-header-layout-mobile { display: none; } .burger { position: relative; width: 24px; height: 18px; background-color: transparent; cursor: pointer; transform: rotate(0); transition: transform 0.4s ease-in-out 0.1s, opacity 0.4s ease-in-out 0.1s, width 0.4s ease-in-out 0.1s; } .burger:focus-visible { outline: 2px solid; outline-offset: 1px; } .burger__bun, .burger__meat { position: absolute; display: block; width: 100%; height: 2px; border-radius: 2px; background: var(--nav-link-text-color); transform-origin: 0; transform: rotate(0); transition: transform 0.25s ease-in-out 0.1s, opacity 0.25s ease-in-out 0.1s, width 0.25s ease-in-out 0.1s; } .burger__bun:first-child { top: 0; } .burger__bun:last-child { top: 16px; } .burger__meat { top: 8px; } .burger--open .burger__bun:first-child { top: -1px; transform: rotate(45deg); } .burger--open .burger__bun:last-child { transform: rotate(-45deg); } .burger--open .burger__meat { width: 0%; opacity: 0; } @media screen and (max-width: 920px) { .block-header { padding: 0 16px; } .block-header-layout-desktop { display: none; } .block-header-logo { width: var(--m-logo-width); height: var(--m-logo-height); } .item-content { margin: 0; font-size: var(--nav-link-m-font-size); } .block-header-layout-mobile { z-index: 18; display: grid; grid-template-columns: auto minmax(0, max-content) max-content; grid-template-areas: "logo cart hamburger-menu"; align-items: center; padding: var(--m-padding, var(--padding)); } .block-header-layout-mobile .block-header__logo { grid-area: logo; } .block-header-layout-mobile .block-header__hamburger-menu { grid-area: hamburger-menu; margin-left: var(--m-element-spacing, var(--element-spacing)); } /* Dropdown panel that slides open under the bar */ .block-header-layout-mobile__dropdown { position: absolute; top: 100%; left: 0; display: flex; flex-direction: column; align-items: flex-end; /* links aligned right, per site settings */ gap: var(--m-element-spacing, var(--element-spacing)); width: 100%; max-height: 0; padding: 0 16px; overflow-y: hidden; scrollbar-width: none; visibility: hidden; background: var(--background-color); box-shadow: none; transition: max-height 0.3s ease-out 0.1s, padding 0.5s 0.1s, visibility 0.6s; } .block-header-layout-mobile__dropdown--open { visibility: visible; height: auto; /* The builder capped the open menu at 50vh, which hid the last items on most phones with no hint to scroll. Let it use the whole screen below the bar instead; it only scrolls if the screen is shorter than the list. */ max-height: calc(100vh - var(--header-height-mobile)); max-height: calc(100dvh - var(--header-height-mobile)); padding: 24px 16px; box-shadow: 0 6px 14px -10px rgba(0, 0, 0, 0.1); animation: 0s 0.5s forwards show-overflow; } .block-header-layout-mobile__dropdown .item-content { text-align: end; } .block-header-layout-mobile__dropdown .item-content-wrapper { justify-content: flex-end; } .block-header-layout-mobile .block-header__nav-links { flex-direction: column; gap: var(--m-link-spacing, var(--link-spacing)); text-align: end; list-style: none; } } @keyframes show-overflow { to { overflow-y: auto; } } /* -------------------------------------------------------------------------- 5. Blocks & the layout grid -------------------------------------------------------------------------- */ .block { position: relative; display: grid; grid-template-rows: 100%; grid-template-columns: 100%; width: 100%; } /* Background layer: --bg is a colour or gradient; photos add an and an optional dark overlay whose strength is --bg-overlay-opacity (0–1). */ .block-background { position: absolute; inset: 0; z-index: 13; overflow: hidden; background: var(--bg); backface-visibility: hidden; } .block-background__image { position: absolute; top: 0; left: 0; z-index: 0; display: block; width: 100%; height: 101%; object-fit: cover; object-position: var(--bg-position, center); } .block-background__overlay { position: absolute; top: 0; left: 0; z-index: 2; width: 100%; height: 100%; background-color: var(--color-dark); opacity: var(--bg-overlay-opacity, 0); } /* "Fixed" (parallax) backgrounds — the photo stays put while the page scrolls. Used by the hero-style photo sections on the homepage. */ .block-background--fixed { bottom: -1px; clip-path: inset(0); pointer-events: none; backface-visibility: hidden; } .block-background__image--fixed, .block-background__overlay--fixed { position: fixed; height: 100vh; height: 100lvh; } /* The grid itself. Row/column templates come from each section's style attr. */ .block-layout { z-index: 14; display: grid; grid-template-rows: var(--grid-template-rows); grid-template-columns: var(--grid-template-columns); width: 100%; max-width: var(--content-width); /* 1224px on this site */ min-height: var(--block-min-height); margin: 0 auto; } /* One placed element (text box, image, button, …) */ .layout-element { position: relative; display: grid; grid-template-columns: 100%; grid-row: var(--grid-row); grid-column: var(--grid-column); z-index: var(--z-index); width: 100%; height: 100%; text-align: var(--text); } .layout-element__component { grid-area: 1 / 1 / -1 / -1; align-self: start; } /* ≤920px: switch to the mobile grid definition */ @media screen and (max-width: 920px) { .block-layout { grid-template-rows: var(--m-grid-template-rows); grid-template-columns: var(--m-grid-template-columns); max-width: var(--m-content-width); /* 360px */ min-height: var(--m-block-min-height); padding: var(--m-padding); /* 0 4.44vw */ } .layout-element { grid-row: var(--m-grid-row); grid-column: var(--m-grid-column); text-align: var(--m-text, var(--text)); } } /* 920–1224px: desktop grid, but rows scale with the viewport */ @media screen and (min-width: 920px) and (max-width: 1224px) { .block-layout { grid-template-rows: var(--small-desktop-grid-template-rows); min-height: var(--small-desktop-block-min-height); } } /* 361–920px: mobile grid with fixed-pixel rows (overrides the vw rows above) */ @media screen and (min-width: 361px) and (max-width: 920px) { .block-layout { grid-template-rows: var(--t-grid-template-rows); min-height: var(--t-block-min-height); padding: var(--t-padding); /* 0 16px */ } } /* -------------------------------------------------------------------------- 6. Text boxes Each heading/paragraph may carry its own --fontSizeDesktop / --fontSizeMobile / --lineHeightDesktop / --lineHeightMobile overrides inline (authored in the builder); otherwise the :root tokens apply. -------------------------------------------------------------------------- */ .text-box { width: 100%; margin: 0; padding: 0; overflow-wrap: break-word; white-space: var(--white-space, break-spaces); background-color: var(--text-background, initial); outline: none; } .text-box h1, .text-box h2, .text-box h3, .text-box h4, .text-box h5, .text-box h6 { font-family: var(--font-primary); font-style: normal; text-transform: none; text-decoration: none; } .text-box h1 { font-weight: var(--h1-font-weight); letter-spacing: var(--h1-letter-spacing); font-size: var(--fontSizeDesktop, var(--h1-font-size)); line-height: var(--lineHeightDesktop, var(--h1-line-height)); } .text-box h2 { font-weight: var(--h2-font-weight); letter-spacing: var(--h2-letter-spacing); font-size: var(--fontSizeDesktop, var(--h2-font-size)); line-height: var(--lineHeightDesktop, var(--h2-line-height)); } .text-box h3 { font-weight: var(--h3-font-weight); letter-spacing: var(--h3-letter-spacing); font-size: var(--fontSizeDesktop, var(--h3-font-size)); line-height: var(--lineHeightDesktop, var(--h3-line-height)); } .text-box h4 { font-weight: var(--h4-font-weight); letter-spacing: var(--h4-letter-spacing); font-size: var(--fontSizeDesktop, var(--h4-font-size)); line-height: var(--lineHeightDesktop, var(--h4-line-height)); } .text-box h5 { font-weight: var(--h5-font-weight); letter-spacing: var(--h5-letter-spacing); font-size: var(--fontSizeDesktop, var(--h5-font-size)); line-height: var(--lineHeightDesktop, var(--h5-line-height)); } .text-box h6 { font-weight: var(--h6-font-weight); letter-spacing: var(--h6-letter-spacing); font-size: var(--fontSizeDesktop, var(--h6-font-size)); line-height: var(--lineHeightDesktop, var(--h6-line-height)); } .text-box .body, .text-box .body-large, .text-box .body-small { font-family: var(--font-secondary); font-style: normal; text-transform: none; text-decoration: none; } .text-box .body { font-weight: var(--body-font-weight); letter-spacing: var(--body-letter-spacing); font-size: var(--fontSizeDesktop, var(--body-font-size)); line-height: var(--lineHeightDesktop, var(--body-line-height)); } .text-box .body-large { font-weight: var(--body-large-font-weight); letter-spacing: var(--body-large-letter-spacing); font-size: var(--fontSizeDesktop, var(--body-large-font-size)); line-height: var(--lineHeightDesktop, var(--body-large-line-height)); } .text-box .body-small { font-weight: var(--body-small-font-weight); letter-spacing: var(--body-small-letter-spacing); font-size: var(--fontSizeDesktop, var(--body-small-font-size)); line-height: var(--lineHeightDesktop, var(--body-small-line-height)); } .text-box span { font-size: var(--fontSizeDesktop); } /* Default spacing between paragraphs/headings inside a text box */ .text-box h1 { margin-bottom: 48px; } .text-box h2, .text-box h3, .text-box h4, .text-box .body-large, .text-box .body { margin-bottom: 32px; } .text-box h5 { margin-bottom: 16px; } .text-box h6 { margin-bottom: 8px; } .text-box .body-small { margin-bottom: 24px; } .text-box h1:last-child, .text-box h2:last-child, .text-box h3:last-child, .text-box h4:last-child, .text-box h5:last-child, .text-box h6:last-child, .text-box .body:last-child, .text-box .body-large:last-child, .text-box .body-small:last-child { margin-bottom: 0; } .text-box ol, .text-box ul { padding-left: 40px; } .text-box ol > h1, .text-box ol h2, .text-box ol h3, .text-box ol h4, .text-box ol h5, .text-box ol h6, .text-box ol .body, .text-box ol .body-large, .text-box ol .body-small, .text-box ul > h1, .text-box ul h2, .text-box ul h3, .text-box ul h4, .text-box ul h5, .text-box ul h6, .text-box ul .body, .text-box ul .body-large, .text-box ul .body-small { margin-bottom: 0; } .text-box p:empty::after { content: " "; } .text-box :is(h1, h2, h3, h4, h5, h6, p):last-child { padding-bottom: max(0px, (1.2 - var(--lineHeightDesktop, 1.2)) * 0.5em); } @media screen and (max-width: 920px) { .text-box { white-space: var(--m-white-space, var(--white-space, break-spaces)); } .text-box h1 { font-size: var(--fontSizeMobile, var(--h1-m-font-size)); line-height: var(--lineHeightMobile, var(--h1-line-height)); } .text-box h2 { font-size: var(--fontSizeMobile, var(--h2-m-font-size)); line-height: var(--lineHeightMobile, var(--h2-line-height)); } .text-box h3 { font-size: var(--fontSizeMobile, var(--h3-m-font-size)); line-height: var(--lineHeightMobile, var(--h3-line-height)); } .text-box h4 { font-size: var(--fontSizeMobile, var(--h4-m-font-size)); line-height: var(--lineHeightMobile, var(--h4-line-height)); } .text-box h5 { font-size: var(--fontSizeMobile, var(--h5-m-font-size)); line-height: var(--lineHeightMobile, var(--h5-line-height)); } .text-box h6 { font-size: var(--fontSizeMobile, var(--h6-m-font-size)); line-height: var(--lineHeightMobile, var(--h6-line-height)); } .text-box .body { font-size: var(--fontSizeMobile, var(--body-m-font-size)); line-height: var(--lineHeightMobile, var(--body-line-height)); } .text-box .body-large { font-size: var(--fontSizeMobile, var(--body-large-m-font-size)); line-height: var(--lineHeightMobile, var(--body-large-line-height)); } .text-box .body-small { font-size: var(--fontSizeMobile, var(--body-small-m-font-size)); line-height: var(--lineHeightMobile, var(--body-small-line-height)); } .text-box span { font-size: var(--fontSizeMobile); } .text-box :is(h1, h2, h3, h4, h5, h6, p):first-child { padding-top: max(0px, (1.2 - var(--lineHeightMobile, 1.2)) * 0.5em); } .text-box :is(h1, h2, h3, h4, h5, h6, p):last-child { padding-bottom: max(0px, (1.2 - var(--lineHeightMobile, 1.2)) * 0.7em); } } /* -------------------------------------------------------------------------- 7. Images & gallery -------------------------------------------------------------------------- */ .image-wrapper { width: 100%; height: 100%; max-height: calc(var(--desktop-max-height) + 0.5px); } .image { position: relative; overflow: var(--overflow, hidden); border-radius: var(--radius, initial); mask-image: var(--mask, initial); -webkit-mask-image: var(--mask, initial); mask-size: 100% 100%; -webkit-mask-size: 100% 100%; } .image::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--image-overlay, initial); } .image--grid { position: relative; display: block; width: 100%; height: 100%; } .image--zoom { cursor: zoom-in; } .image__image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--object-position, center); } /* Manually cropped images: the is offset/scaled inside the clipping box */ .image__image--cropped { position: absolute; top: var(--desktop-top); left: var(--desktop-left); width: var(--desktop-width); height: var(--desktop-height); transform: scale(var(--desktop-scale)); transform-origin: 0 0; } @media screen and (min-width: 920px) and (max-width: 1224px) { /* fluid sizing in the small-desktop range */ .image--grid { width: var(--sd-width); max-width: 100%; height: var(--sd-height); } } @media screen and (max-width: 920px) { .image-wrapper { max-height: var(--mobile-max-height); } .image { border-radius: var(--m-radius, initial); } .image--grid { width: 100%; height: 100%; } .image__image--cropped { top: var(--mobile-top); left: var(--mobile-left); width: var(--mobile-width); height: var(--mobile-height); transform: scale(var(--mobile-scale)); } } @media screen and (max-width: 360px) { .image { width: var(--xs-width); max-width: 100%; height: var(--xs-height); } } /* Photo grid on /photos-videos */ .grid-gallery-grid { display: grid; grid-template-columns: repeat(var(--columns), 1fr); grid-gap: var(--gap); } .grid-gallery-grid__image-wrapper { position: relative; padding-top: 100%; } .grid-gallery-grid__image-wrapper .grid-gallery-grid__image { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; } @media screen and (max-width: 920px) { .grid-gallery-grid { grid-template-columns: repeat(var(--m-columns), 1fr); grid-gap: var(--m-gap); } } /* -------------------------------------------------------------------------- 8. Buttons -------------------------------------------------------------------------- */ .grid-button--primary { --border-width: 0px; z-index: 1; display: flex; align-items: center; height: min-content; max-width: 100%; min-height: var(--grid-button-primary-min-height); padding: calc(var(--grid-button-primary-padding-y) - var(--border-width)) calc(var(--grid-button-primary-padding-x) - var(--border-width)); overflow: hidden; font-family: var(--font-family, var(--grid-button-primary-font-family)); font-size: var(--font-size-desktop, var(--grid-button-primary-font-size)); font-style: var(--grid-button-primary-font-style); font-weight: var(--font-weight, var(--grid-button-primary-font-weight)); line-height: var(--grid-button-primary-line-height); letter-spacing: var(--grid-button-primary-letter-spacing); text-align: center; text-decoration: var(--grid-button-primary-text-decoration); text-overflow: ellipsis; text-transform: var(--grid-button-primary-text-transform); white-space: nowrap; color: var(--font-color); background-color: var(--background-color); border: var(--border-width) solid var(--border-color); border-radius: var(--border-radius, var(--grid-button-primary-border-radius)); cursor: pointer; transition: color var(--grid-button-primary-transition-duration) var(--grid-button-primary-transition-timing-function), border-color var(--grid-button-primary-transition-duration) var(--grid-button-primary-transition-timing-function), background-color var(--grid-button-primary-transition-duration) var(--grid-button-primary-transition-timing-function); } .grid-button--primary:hover { color: var(--font-color-hover); background-color: var(--background-color-hover); border: var(--border-width) solid var(--border-color-hover); } /* The grid cell a button sits in: button stretches to the element's box */ .layout-element__component--GridButton { display: flex; justify-content: center; align-items: center; justify-self: start; min-width: 100%; min-height: var(--desktop-height); padding: 0; text-overflow: clip; white-space: nowrap; } @media screen and (max-width: 1191px) { .layout-element__component--GridButton { white-space: normal; } } @media screen and (max-width: 920px) { .grid-button--primary { padding: calc(var(--grid-button-primary-m-padding-y, var(--grid-button-primary-padding-y)) - var(--border-width)) calc(var(--grid-button-primary-m-padding-x, var(--grid-button-primary-padding-x)) - var(--border-width)); font-size: var(--font-size-mobile, var(--grid-button-primary-m-font-size, var(--grid-button-primary-font-size))); } .layout-element__component--GridButton { min-height: var(--mobile-height); } } @media screen and (max-width: 360px) { .layout-element__component--GridButton { min-width: var(--m-width); min-height: var(--m-height); padding-left: 14px; padding-right: 14px; } } /* -------------------------------------------------------------------------- 9. Social icons -------------------------------------------------------------------------- */ .social-icons { display: flex; flex-direction: var(--icon-direction); justify-content: var(--icon-spacing, start); max-height: 100%; padding: 10px; padding: var(--gridItemInnerPadding); } .social-icons__link { display: flex; justify-content: center; align-items: center; line-height: 1; color: var(--icon-color, black); transition: color 0.2s; } .social-icons__link:not(:last-child) { padding-right: var(--icon-padding-horizontal); padding-bottom: var(--icon-padding-vertical); } .social-icons__link:hover { color: var(--icon-color-hover, #727586); } .social-icons__link svg { width: var(--icon-size, 25px); height: var(--icon-size, 25px); object-fit: contain; } @media screen and (max-width: 920px) { .social-icons { flex-direction: var(--m-icon-direction); } .social-icons__link:not(:last-child) { padding-right: var(--m-icon-padding-horizontal, var(--icon-padding-horizontal)); padding-bottom: var(--m-icon-padding-vertical, var(--icon-padding-vertical)); } } /* -------------------------------------------------------------------------- 10. Video — YouTube thumbnail + play button; the iframe loads on click -------------------------------------------------------------------------- */ .video { position: relative; width: 100%; height: 100%; background-color: var(--video-bg, var(--color-dark)); cursor: pointer; } .video__frame, .video__placeholder { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; } .video__placeholder { object-fit: cover; } .video__play { position: absolute; top: 50%; left: 50%; width: 68px; height: 48px; margin-top: -24px; margin-left: -34px; padding: 0; color: #fff; text-align: center; text-indent: 1px; background-color: rgba(30, 30, 30, 0.8); border-radius: 15% / 40%; transition: background-color 0.15s ease-out; } .video__play::before { content: ""; position: absolute; top: 50%; left: 50%; width: 0; height: 0; margin-top: -10px; margin-left: -9px; border: 10px solid transparent; border-left: 18px solid #fff; border-right-width: 0; } .video:hover .video__play { background-color: #fc5185; } /* -------------------------------------------------------------------------- 11. Lightbox (gallery click-to-enlarge), styled like the builder's -------------------------------------------------------------------------- */ .lightbox { position: fixed; inset: 0; z-index: 22; display: flex; justify-content: center; align-items: center; background-color: rgba(29, 30, 32, 0.8); } .lightbox[hidden] { display: none; } .lightbox__container { display: flex; width: 100%; } .lightbox__button { position: relative; display: flex; width: 52px; height: 52px; color: #f2f3f6; background-color: transparent; cursor: pointer; transition: background-color 0.2s; } .lightbox__button:hover, .lightbox__button:focus-visible { background-color: rgba(255, 255, 255, 0.2); } .lightbox__button--close { position: absolute; top: 0; right: 0; } .lightbox__button--close::before, .lightbox__button--close::after { content: ""; position: absolute; top: 25px; left: 16px; width: 20px; height: 2px; border-radius: 2px; background-color: currentColor; } .lightbox__button--close::before { transform: rotate(45deg); } .lightbox__button--close::after { transform: rotate(-45deg); } .lightbox__button--nav::before { content: ""; position: absolute; top: 20px; left: 20px; width: 14px; height: 14px; border-bottom: 2px solid; border-left: 2px solid; border-radius: 2px; transform: rotate(45deg); } .lightbox__button--next { transform: rotate(180deg); } .lightbox__nav { display: flex; flex: 0 10%; justify-content: center; align-items: center; background-color: transparent; } .lightbox__picture { display: contents; } /* the stays the flex item */ .lightbox__image { position: relative; flex: 0 0 80%; max-width: 80%; max-height: 90vh; margin: auto; padding: 0; object-fit: contain; text-align: center; } @media screen and (max-width: 920px) { .lightbox__nav { display: none; } .lightbox__image { max-width: 100%; } } /* -------------------------------------------------------------------------- 12. Custom blocks These were "custom code" embeds in the builder, rendered in sandboxed iframes. They are now inline, so their selectors are scoped to avoid leaking into the rest of the page. -------------------------------------------------------------------------- */ /* --- Brand carousel ("BRANDS I'VE PARTNERED WITH…") on / and /corporate --- */ .brand-carousel { position: relative; display: flex; align-items: center; width: 100%; height: 150px; padding: 0 20px; overflow: hidden; } .brand-carousel__track { display: flex; width: calc(150px * 10); height: 150px; animation: brand-carousel-scroll 150s linear infinite; } .brand-carousel__logo { display: flex; align-items: center; padding-left: 20px; padding-right: 20px; } @keyframes brand-carousel-scroll { from { transform: translateX(0); } to { transform: translateX(calc(-150px * 50)); } } /* --- FAQ accordion on /faq --- */ .faq-question { width: 100%; padding: 20px; font-family: "Montserrat RLM FAQ", sans-serif; font-size: 18px; font-weight: bold; text-align: left; color: #000; background-color: #eee; border: none; outline: none; cursor: pointer; transition: 0.4s; } .faq-question.is-open, .faq-question:hover { background-color: #ccc; } .faq-answer { max-height: 0; padding: 0 18px; overflow: hidden; font-family: "Montserrat RLM FAQ", sans-serif; font-size: 18px; font-weight: 200; line-height: 1.25; color: #000; background-color: #fafafa; transition: max-height 0.2s ease-out; } /* --- Corporate card on /corporate --- */ .corporate-card { width: 100%; padding: 20px 24px; font-family: "Montserrat RLM Cards", sans-serif; line-height: 1.45; text-align: left; color: #000; background: rgba(255, 255, 255, 0.75); border: 5px solid #363636; border-radius: 10px; } .corporate-card__title { margin: 0 0 14px; font-size: 40px; font-weight: 600; text-align: center; } .corporate-card__body { margin: 0; font-size: 20px; font-weight: 400; text-align: center; } /* Same iframe-relative breakpoint as the wedding cards (see below): the old card measured its own width (709px on desktop, 328px on phones). */ .grid-embed:has(> .corporate-card) { container-type: inline-size; } @container (max-width: 600px) { .corporate-card__title { font-size: 28px; } .corporate-card__body { font-size: 15px; line-height: 1.4; } } @supports not (container-type: inline-size) { @media (max-width: 600px) { .corporate-card__title { font-size: 28px; } .corporate-card__body { font-size: 15px; line-height: 1.4; } } } /* --- Wedding package cards on /weddings (Silver / Gold / Diamond / Rehearsal) --- */ .pricing-card { width: 100%; min-height: 375px; /* desktop: the four cards match; a card may grow if its text needs more room */ padding: 2px 20px; font-family: "Montserrat RLM Cards", sans-serif; line-height: 1.45; color: #000; background: #f6f6f6; border: 5px solid #c0c0c0; /* silver border */ border-radius: 10px; } .pricing-card__title { margin: 0 0 8px; font-size: 48px; font-weight: 400; } .pricing-card__price { margin: 0 0 16px; font-size: 24px; font-weight: 700; } .pricing-card__tagline { margin: 0 0 16px; font-size: 18px; } .pricing-card__section-title { margin: 12px 0 10px; font-size: 16px; font-weight: 700; } .pricing-card__list { margin: 0; padding-left: 1.15em; } .pricing-card__list li { margin-bottom: 8px; font-size: 16px; line-height: 1.2; } /* Per-package colours (each card carried its own stylesheet on the old site) */ .pricing-card--gold { background: #fdf6da; border-color: #f0c105; } .pricing-card--diamond { background: #f5fdff; border-color: #baf2ff; } .pricing-card--rehearsal { background: #e3c5cf; border-color: #db9eb2; } /* On the old site each card lived in its own iframe, so the cards' own "@media (max-width: 400px)" rule measured the CARD's width (328px on every phone, ~512px on desktop), not the screen's. Container queries reproduce that exactly: the card box is the container, and the breakpoints below are relative to it. (A plain viewport media query broke on phones wider than 400 CSS px, e.g. most Android phones, where the desktop sizes and the fixed 375px height applied and the text spilled out of the cards.) */ .grid-embed:has(> .pricing-card) { container-type: inline-size; } /* Card wider than 400px (desktop): tweaks the individual cards carried */ @container (min-width: 401px) { .pricing-card--gold .pricing-card__list li, .pricing-card--diamond .pricing-card__list li, .pricing-card--rehearsal .pricing-card__list li { line-height: 1.1; } /* the Gold card's text scales with the root font size */ .pricing-card--gold .pricing-card__title { font-size: clamp(28px, 3rem, 48px); } .pricing-card--gold .pricing-card__price { font-size: clamp(18px, 2rem, 24px); } .pricing-card--gold .pricing-card__tagline { font-size: clamp(14px, 1.25rem, 18px); } .pricing-card--gold .pricing-card__section-title, .pricing-card--gold .pricing-card__list li { font-size: clamp(12px, 1.25rem, 16px); } } /* Card 400px wide or less (every phone): the cards' own mobile overrides */ @container (max-width: 400px) { .pricing-card { height: auto; padding: 12px 16px; } .pricing-card__title { font-size: 32px; } .pricing-card__price { font-size: 20px; } .pricing-card__tagline { font-size: 15px; } .pricing-card__section-title { font-size: 14px; } .pricing-card__list li { margin-bottom: 6px; font-size: 14px; line-height: 1.25; } } /* Browsers without container queries (pre-2023): fall back to the screen width — phones and small tablets get the mobile sizes. */ @supports not (container-type: inline-size) { @media (max-width: 920px) { .pricing-card { height: auto; padding: 12px 16px; } .pricing-card__title { font-size: 32px; } .pricing-card__price { font-size: 20px; } .pricing-card__tagline { font-size: 15px; } .pricing-card__section-title { font-size: 14px; } .pricing-card__list li { margin-bottom: 6px; font-size: 14px; line-height: 1.25; } } } /* -------------------------------------------------------------------------- 13. Embeds / forms -------------------------------------------------------------------------- */ .grid-embed { width: 100%; height: auto; } /* JotForm injects its own