/* File Purpose: Root File for XX : Defines your base styles, variables, colors, typography, and layout defaults. Author: Victoria Cruse Version: 1.0.0 1️⃣ Variables (:root) – Colors, typography, spacing 2️⃣ Reset & Normalize – Consistent baseline styles 3️⃣ Base Styles – Default element styles 4️⃣ Layout – Containers, grid, flex, spacing 5️⃣ Components – Buttons, forms, cards 6️⃣ Utilities – Small helper classes Add in header.php : */ /* * * Font Families: Anton & Inter * */ @layer fonts { @font-face { font-family: 'TikTok Sans'; src: url('/wp-content/themes/astra-child/fonts/tiktok-sans/TikTokSans-Light.woff2') format('woff2'), url('/wp-content/themes/astra-child/fonts/tiktok-sans/TikTokSans-Light.woff') format('woff'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'TikTok Sans'; src: url('/wp-content/themes/astra-child/fonts/tiktok-sans/TikTokSans36pt-Regular.woff2') format('woff2'), url('/wp-content/themes/astra-child/fonts/tiktok-sans/TikTokSans36pt-Regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'TikTok Sans'; src: url('/wp-content/themes/astra-child/fonts/tiktok-sans/TikTokSans36pt-Medium.woff2') format('woff2'), url('/wp-content/themes/astra-child/fonts/tiktok-sans/TikTokSans36pt-Medium.woff') format('woff'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'TikTok Sans'; src: url('/wp-content/themes/astra-child/fonts/tiktok-sans/TikTokSans36pt-SemiBold.woff2') format('woff2'), url('/wp-content/themes/astra-child/fonts/tiktok-sans/TikTokSans36pt-SemiBold.woff') format('woff'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'TikTok Sans'; src: url('/wp-content/themes/astra-child/fonts/tiktok-sans/TikTokSans36pt-Bold.woff2') format('woff2'), url('/wp-content/themes/astra-child/fonts/tiktok-sans/TikTokSans36pt-Bold.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'TikTok Sans'; src: url('/wp-content/themes/astra-child/fonts/tiktok-sans/TikTokSans36pt-ExtraBold.woff2') format('woff2'), url('/wp-content/themes/astra-child/fonts/tiktok-sans/TikTokSans36pt-ExtraBold.woff') format('woff'); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: 'vicwriting'; src: url(../fonts/custom/vicwriting-webfont.woff2) format('woff2'), url(../fonts/custom/vicwriting-webfont.woff) format('woff'); font-weight: normal; font-style: normal; } } @font-face { font-family: 'LT Karaoke'; src: url('/wp-content/themes/astra-child/fonts/LTKaraoke/LTKaraokeBody-Bold.woff2') format('woff2'), url('/wp-content/themes/astra-child/fonts/LTKaraoke/LTKaraokeBody-Bold.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'LT Karaoke'; src: url('/wp-content/themes/astra-child/fonts/LTKaraoke/LTKaraokeBody-SemiBold.woff2') format('woff2'), url('/wp-content/themes/astra-child/fonts/LTKaraoke/LTKaraokeBody-SemiBold.woff') format('woff'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'LT Karaoke'; src: url('/wp-content/themes/astra-child/fonts/LTKaraoke/LTKaraokeBody-Medium.woff2') format('woff2'), url('/wp-content/themes/astra-child/fonts/LTKaraoke/LTKaraokeBody-Medium.woff') format('woff'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'LT Karaoke'; src: url('/wp-content/themes/astra-child/fonts/LTKaraoke/LTKaraokeBody-Regular.woff2') format('woff2'), url('/wp-content/themes/astra-child/fonts/LTKaraoke/LTKaraokeBody-Regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'LT Karaoke'; src: url('/wp-content/themes/astra-child/fonts/LTKaraoke/LTKaraokeBody-Light.woff2') format('woff2'), url('/wp-content/themes/astra-child/fonts/LTKaraoke/LTKaraokeBody-Light.woff') format('woff'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Unbounded'; src: url('/wp-content/themes/astra-child/fonts/unbounded/Unbounded-Light.woff2') format('woff2'), url('/wp-content/themes/astra-child/fonts/unbounded/Unbounded-Light.woff') format('woff'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Unbounded'; src: url('/wp-content/themes/astra-child/fonts/unbounded/Unbounded-Blond.woff2') format('woff2'), url('/wp-content/themes/astra-child/fonts/unbounded/Unbounded-Blond.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Unbounded'; src: url('/wp-content/themes/astra-child/fonts/unbounded/Unbounded-Regular.woff2') format('woff2'), url('/wp-content/themes/astra-child/fonts/unbounded/Unbounded-Regular.woff') format('woff'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Unbounded'; src: url('/wp-content/themes/astra-child/fonts/unbounded/Unbounded-Medium.woff2') format('woff2'), url('/wp-content/themes/astra-child/fonts/unbounded/Unbounded-Medium.woff') format('woff'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Unbounded'; src: url('/wp-content/themes/astra-child/fonts/unbounded/Unbounded-Bold.woff2') format('woff2'), url('/wp-content/themes/astra-child/fonts/unbounded/Unbounded-Bold.woff') format('woff'); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: 'Unbounded'; src: url('/wp-content/themes/astra-child/fonts/unbounded/Unbounded-Black.woff2') format('woff2'), url('/wp-content/themes/astra-child/fonts/unbounded/Unbounded-Black.woff') format('woff'); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: 'WhiteboardMarker Regular'; src: url('/wp-content/themes/astra-child/fonts/WhiteboardMarker-Regular.woff') format('woff2'), url('wp-content/themes/astra-child/fonts/WhiteboardMarker-Regular.woff') format('woff'); font-weight: 600; font-style: normal; font-display: swap; } /* Root Designs for skiplinks */ :root { --color-primary: var(--lime); /* Primary color */ --color-primary-dark: var(--orange); /* Darker shade of primary */ --color-on-primary: var(--white); /* Text color on primary */ --color-focus-ring: var(--pink); /* Focus ring color for accessibility */ --color-background: #f4f4f4; /* Default background */ --color-text: #333333; /* Default text color */ --color-border: #ddd; /* Default border color */ --btn-background: var(--color-primary); --btn-text-color: var(--color-on-primary); --btn-border-color: var(--color-primary-dark); /* Action button color (for skip links) */ --action: var(--color-primary); /* Scroll Padding */ --scroll-padding-top: calc(50vh - 50px); /* Adjust for sticky navigation */ /* Accessibility-related variables */ --focus-ring: 2px solid var(--color-focus-ring); } @layer colours { :root { --black: #111111; --white: #ffffff; --milk: #f9f4f3; --oatmeal: #FFF5E9; --site-bg: var(--oatmeal); --chocolate: #493a34; --lime: #D6E29C; --lime-l: #dfe6bc; --baby-blue: #C2E2FF; --baby-blue-l: #d8e8f8; --orange-l: #fddbc5; --orange: #FFCBAA; --orange-d: #ed9f45; --pink: #F8CAD6; --pink-l: #fcdee6; --pink-d: #ea9fb3; --purple: #E1CAF2; --purple-l: #f0e1fe; --purple-d: #D5B0F0; --yellow: #FFEE8C; --yellow-l: #feefbe; --yellow-d: #FBE184; --twhitebg: #3d3d3d; --tblackbg: #a8a8a8; /* Shadows */ --clr-shadow-300: hsl(45, 11%, 93%); --clr-shadow-400: hsl(26, 41%, 28%); /* Links */ --clr-visited-darkbg: var(--lime); --clr-visited-lightbg: var(--main-dark); } } .bg-notepaper { background-color: var(--white); background-image: repeating-linear-gradient(to bottom, transparent, transparent 23px, #cfd8f6 24px); background-size: 100% 24px; padding: 20px; transform: rotate(6deg)); } .bg-white { background: var(--white); } .bg-oatmeal { background: var(--oatmeal); } .bg-milk { background: var(--milk); } .bg-faded-pink { background: var(--faded-pink); } .bg-chocolate { background: var(--chocolate); } .bg-pink { background: var(--pink); } .bg-pink-l { background: var(--pink-l); } .bg-pink-h { background: var(--pink-l); :hover { background: var(--pink); border-radius: inherit; } } .bg-orange { background: var(--orange); } .bg-orange-l { background: var(--orange-l); } .bg-orange-h { background: var(--orange-l); :hover { background: var(--orange); border-radius: inherit; } } .bg-blue { background: var(--baby-blue); } .bg-blue-l { background: var(--baby-blue-l); } .bg-blue-h { background: var(--baby-blue-l); :hover { background: var(--baby-blue); border-radius: inherit; } } .bg-yellow { background: var(--yellow); } .bg-yellow-l { background: var(--yellow-l); } .bg-yellow-h { background: var(--yellow-l); :hover { background: var(--yellow); border-radius: inherit; } } .bg-purple { background: var(--purple); } .bg-purple-l { background: var(--purple-l); } .bg-purple-h { background: var(--purple-l); :hover { background: var(--purple); border-radius: inherit; } } .bg-green { background: var(--lime); } .bg-green-l { background: var(--lime-l); } .bg-green-h { background: var(--lime-l); :hover { background: var(--lime); border-radius: inherit; } } .t-oatmeal { color: var(--oatmeal); } .t-milk { color: var(--milk); } .t-chocolate { color: var(--chocolate); } .t-purple { color: var(--purple); } .t-pink { color: var(--pink); } .t-pink-l { color: var(--pink-l); } .t-blue { color: var(--blue); } .t-green { color: var(--lime); } .t-yellow { color: var(--yellow); } :root { /* ======================== */ /* Master Site Settings */ /* ======================== */ --site-edge: 4%; --max-width: 85dvw; --max-site-width: 1500px; --letter-spacing-body: .2px; /* ======================== */ /* Font Families */ /* ======================== */ --ff-primary: 'Unbounded', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --ff-secondary: 'LT Karaoke', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --ff-handwriting: 'vicwriting', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --ff-whiteboard: 'WhiteboardMarker Regular', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --ff-button: var(--ff-primary); --ff-body: var(--ff-secondary); --ff-heading: var(--ff-primary); --ff-subheading: var(--ff-secondary); /* ======================== */ /* Font Styling */ /* ======================== */ --fw-light: 300; --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; --fs-normal: normal; --fs-italic: italic; /* ======================== */ /* Line Height */ /* ======================== */ --lh-xxs: .95em; --lh-xs: 1.2em; --lh-s: 1.3em; --lh-m: clamp(1.15em, 1.8834rem + 0.0555vw, 1.3em); --lh-l: clamp(1.2em, 1.9669em + 0.2776vw, 1.4em); /* ======================== */ /* Buttons */ /* ======================== */ /* Button Variables */ --btn-padding-block: 10px; --btn-padding-inline: 18px; --btn-min-width: 120px; --btn-lh: var(--lh-m); /* Line height for buttons */ --btn-font-weight: var(--fw-bold); /* Font weight */ --btn-font-size: var(--fs-credits); --btn-font-style: normal; --btn-text-decoration: none; --btn-text-transform: uppercase; --letter-spacing-title: 0px; /* Letter spacing for titles */ --letter-spacing-btn: -2px; /* Letter spacing for buttons */ --letter-spacing-text: .3px; /* Letter spacing for text */ --btn-border-width: 2px; --btn-border-style: solid; --btn-border-radius: 2px; --btn-display: inline-flex; --btn-transition-duration: 0.3s; --backdrop-filter: blur(3px); --backdrop-color: #fff8f0ab; --btn-padding: var(--btn-padding-block) var(--btn-padding-inline); --icon-size: clamp(3.5rem, 3.75vw, 4rem); --icon-radius: 100vw; /* ======================== */ /* Rounding */ /* ======================== */ --br-xs: calc(.9 * var(--content-rounding)); --br-s: calc(1.3 * var(--content-rounding)); --br-m: calc(1.5 * var(--content-rounding)); --br-l: calc(2 * var(--content-rounding)); --content-rounding: 12px; --button-br-s: var(--content-rounding); --button-br-m: calc(1.5 * var(--content-rounding)); --button-br-l: calc(2 * var(--content-rounding)); /* ======================== */ /* Layering */ /* ======================== */ --z-index-dropdown: -500; --z-index-above-footer: -400; --z-index-modal: 2000; --z-index-overlay: 3000; /* ======================== */ /* Content Spacing */ /* ======================== */ --spacing-xs: clamp(0.3rem, 0.001rem + 0.6238vw, 0.5rem); --spacing-s: clamp(0.5rem, 0.1262rem + 0.7797vw, 0.75rem); --spacing-m: clamp(0.75rem, 0.3762rem + 0.7797vw, 1rem); --spacing-m-l: clamp(1.25rem, 1.0024rem + 1.5595vw, 1.45rem); --spacing-l: clamp(1.75rem, 1.0024rem + 1.5595vw, 2.25rem); --spacing-xl: clamp(2.5rem, 1.7524rem + 1.5595vw, 3rem); --spacing-xxl: clamp(2rem, 1.9524rem + 1.8595vw, 5rem); --spacing-card: clamp(.6rem, 0.80524rem + 1.5595vw, 2.5rem); --spacing-nav: 4dvw; /*shrinks with screen width*/ --section-space-xs: clamp(1rem, -4.987rem + 12.4892vw, 10rem); --section-space-s: clamp(2rem, 1.6696rem + 2.7754vw, 5rem); --section-space-m: clamp(4rem, 2.6696rem + 2.7754vw, 6rem); --section-space-l: clamp(4rem, 3.3352rem + 2.2207vw, 7rem); --section-space-xl: clamp(6.5rem, 5.5022rem + 2.0815vw, 8rem); /* ======================== */ /* Animations */ /* ======================== */ --animation-duration-fast: 0.2s; --animation-duration-medium: 0.4s; --animation-duration-slow: 0.6s; --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); } /* Base float-in animation */ .animate-float-in { opacity: 0; transform: translateY(50px); transition: transform 0.8s ease, opacity 0.8s ease; } /* When in view */ .animate-float-in.in-view { opacity: 1; transform: translateY(0); } /* Base float-in animation */ .animate-float-in-right { opacity: 0; transform: translateX(100px); transition: transform 0.8s ease, opacity 0.8s ease; } /* When in view */ .animate-float-in-right.in-view { opacity: 1; transform: translateX(0); } /* Base float-in animation */ .animate-float-in-left { opacity: 0; transform: translateX(-100px); transition: transform 0.8s ease, opacity 0.8s ease; } /* When in view */ .animate-float-in-left.in-view { opacity: 1; transform: translateX(0); } .delay-1.in-view { transition-delay: 0.2s; } .delay-2.in-view { transition-delay: 0.4s; } .delay-3.in-view { transition-delay: 0.9s; } .delay-4.in-view { transition-delay: 1.4s; } .delay-5.in-view { transition-delay: 2s; } .delay-1s.in-view { transition-delay: 1s; } .delay-1halfs.in-view { transition-delay: 1.5s; } .delay-2s.in-view { transition-delay: 2s; } .delay-2halfs.in-view { transition-delay: 2.5s; } .delay-3s.in-view { transition-delay: 3s; } /* etc */ .hover-zoom:hover { cursor: pointer; transform: scale(0.97); transition: all 0.4s ease; } .hover-zoom { transition: all 0.4s ease; } .h-lift:hover { transform: translateY(-10%); transition: .1s ease; } .carousel-slide.testimonial-content { border-radius: unset; /* border: .15em dashed var(--purple); */ } p.testimonial { font-size: calc(1.3*var(--fs-p)); line-height: 1.4em; } /* ======================== */ /* Colours */ /* ======================== */ .twhitebg { color: var(--twhitebg); } .tblackbg { color: var(--tblackbg); } /* ======================== */ /* Font Sizing */ /* ======================== */ @supports (font-size: clamp(1vw, 2vw, 3vw)) { :root { --fs-h6: clamp(1.0rem, 1.0004rem + 0.4163vw, 1.3rem); --fs-h5: clamp(1.15rem, 0.651rem + 0.6238vw, 1.4rem); --fs-h4: clamp(1.08rem, 0.991rem + 0.55vw, 1.25rem); --fs-h3: calc(.6*clamp(1.3rem, 0.991rem + 0.55vw, 1.8rem)); --fs-h2: calc(.5*clamp(2.2rem, 2.336rem + 2.82vw, 5.2rem)); --fs-h1: calc(.46*clamp(4.9rem, 3.3676rem + 4.8103vw, 7.5rem)); --fs-p: clamp(1.1rem, 0.9103rem + 0.3331vw, 1.6rem); --fs-primary-button: clamp(1.2rem, 0.7835rem + 0.1388vw, 1.4rem); --fs-secondary-button: .75rem; --fs-preheading: clamp(1rem, 0.5335rem + 0.2221vw, 1.3rem); --fs-credits: clamp(0.8rem, 0.491rem + 0.55vw, .96rem); --fs-footer: clamp(0.95rem, 1.0003rem + 0.3331vw, 1.3rem); --fs-title-short: clamp(4.5rem, 5.2659rem + -0.8883vw, 4.2rem); --fs-tag: clamp(1.08rem, 0.991rem + 0.55vw, 1.25rem); --fs-medium: clamp(1.5rem, 1.318rem + 0.91vw, 2rem); --fs-large: clamp(3.4rem, 1.3676rem + 7.4103vw, 4.5rem); --fs-btn: clamp(1.2rem, 0.5335rem + 0.7221vw, 1.7rem); --fs-small: 0.9rem; } } .t-med { font-size: var(--fs-medium); } .t-pushdown { display: flex; align-items: flex-end; flex-direction: column; } .invert { filter: invert(1); } .push-down { display: flex; align-items: flex-end; } .push-right { text-align: right; margin-left: auto; margin-right: 0; } .push-left { display: flex; align-items: flex-start; margin-left: 0; } /* skip link defaults */ a[href="#main-content"], a[href="#footer"] { position: absolute; inset-block-start: 1rem; inset-inline-start: 1rem; transform: translateY(-250%); /* Sizing */ padding-block: var(--btn-padding-block, 0.5rem); padding-inline: var(--btn-padding-inline, 1rem); min-inline-size: var(--btn-min-width, 8rem); line-height: var(--btn-lh, 1.2); font-size: var(--fs-p, 1rem); font-weight: var(--btn-font-weight, 600); font-style: var(--btn-font-style, normal); text-decoration: var(--btn-text-decoration, none); text-transform: var(--btn-text-transform, uppercase); letter-spacing: var(--letter-spacing, 0.05em); /* Borders */ border-width: var(--btn-border-width, 2px); border-style: var(--btn-border-style, solid); border-radius: var(--btn-border-radius, 6px); /* Display */ display: var(--btn-display, inline-flex); text-align: center; justify-content: center; align-items: center; /* Theming (Universal Colors) */ background: var(--color-primary, #007bff); color: var(--color-on-primary, #ffffff); border-color: var(--color-primary-dark, #0056b3); /* Hover / Focus */ transition: all var(--btn-transition-duration, 0.3s) ease; } a[href="#main-content"]:focus, a[href="#footer"]:focus { transform: translateY(0); outline: 2px solid var(--color-focus-ring, #ffcc00); } /* ======================== */ /* Tool Tips */ /* ======================== */ .tooltip .tooltiptext { visibility: hidden; width: 100%; text-align: center; background: var(--site-bg); padding: var(--spacing-xs) var(--spacing-xs); position: absolute; z-index: 100; color: black; text-wrap: nowrap; opacity: 0; transition: opacity 0.3s; font-size: .8rem; line-height: var(--lh-s); transition: all 0.3s; } a.tooltip { position: relative; } .tooltip:hover .tooltiptext { visibility: visible; opacity: 1; } /* ============================= */ /* === Box Model Utilities === */ /* ============================= */ /* Margin Utilities */ .mgn-xs { margin: var(--spacing-xs); } .mgn-s { margin: var(--spacing-s); } .mgn-m { margin: var(--spacing-m); } .mgn-l { margin: var(--spacing-l); } .mgn-xl { margin: var(--spacing-xl); } .mgn-xxl { margin: var(--spacing-xxl); } .mgn-auto { margin: auto; } /* Margin Top - move things down */ .u-margin-top-s { margin-top: 10px; } .u-margin-top-m { margin-top: 20px; } .u-margin-top-m-l { margin-top: 40px; } .u-margin-top-l { margin-top: 60px; } .u-margin-bottom-s { margin-bottom: 10px; } .u-margin-bottom-m { margin-bottom: 20px; } .u-margin-bottom-l { margin-bottom: 30px; } /* Equal Padding All Sides */ .p-0 { padding: 0; } .p-xs { padding: var(--spacing-xs); } .p-s { padding: var(--spacing-s); } .p-m { padding: var(--spacing-m); } .p-m-l { padding: var(--spacing-m-l); } .p-l { padding: var(--spacing-l); } .p-xl { padding: var(--spacing-xl); } .p-xxl { padding: var(--spacing-xxl); } /* Padding Horizontal */ .p-inline-xs { padding-inline: var(--spacing-xs); } .p-inline-s { padding-inline: var(--spacing-s); } .p-inline-m { padding-inline: var(--spacing-m); } .p-inline-m-l { padding-inline: var(--spacing-m-l); } .p-inline-l { padding-inline: var(--spacing-l); } .p-inline-xl { padding-inline: var(--spacing-xl); } .p-inline-card { padding-inline: var(--spacing-card); } /* Padding Vertical & Horizontal [Mobile] */ @media (width < 60em) { .p-inline-mob-xs { padding-inline: var(--spacing-xs); } .p-inline-mob-s { padding-inline: var(--spacing-s); } .p-inline-mob-m { padding-inline: var(--spacing-m); } .p-inline-mob-m-l { padding-inline: var(--spacing-m-l); } .p-inline-mob-l { padding-inline: var(--spacing-l); } .p-inline-mob-xl { padding-inline: var(--spacing-xl); } .p-bottom-mob-xs { padding-bottom: var(--spacing-xs); } .p-bottom-mob-s { padding-bottom: var(--spacing-s); } .p-bottom-mob-m { padding-bottom: var(--spacing-m); } .p-bottom-mob-m-l { padding-bottom: var(--spacing-m-l); } .p-bottom-mob-l { padding-bottom: var(--spacing-l); } .p-bottom-mob-xl { padding-bottom: var(--spacing-xl); } } /* Padding Vertical */ .p-block-xs { padding-block: var(--spacing-xs); } .p-block-s { padding-block: var(--spacing-s); } .p-block-m { padding-block: var(--spacing-m); } .p-block-m-l { padding-block: var(--spacing-m-l); } .p-block-l { padding-block: var(--spacing-l); } .p-block-xl { padding-block: var(--spacing-xl); } .p-block-xxl { padding-block: var(--spacing-xxl); } /* EXTRA Padding Vertical [Mobile] */ @media (width < 60em) { .lift-mob { margin-top: -20px; } .hide-mob { display: none; } .drop-mob { margin-top: 40px; } /* Margin Spacer */ .p-block-mob-xl { margin-block: 3rem; } .p-block-mob-l { margin-block: 2.5rem; } .p-block-mob-m { margin-block: 2rem; } .p-block-mob-s { margin-block: 1rem; } .p-block-mob-xs { margin-block: .5rem; } } /* Display Utilities */ .d-block { display: block; } .d-inline { display: inline; } .d-inline-block { display: inline-block; } .d-flex { display: flex; } .d-grid { display: grid; } .d-none { display: none; } /* ======================== */ /* Grids */ /* ======================== */ .responsive-gap { gap: clamp(1rem, 0.568rem + 2.16vw, 3rem) } /* Adjustments per Layout */ .grid--3 { --columns: auto-fit; --min-col-size: 15em; } .grid--4 { --columns: auto-fit; --min-col-size: 200px; } .grid--2 { --columns: 2; } .grid--auto { --columns: auto-fill; } /* Generic Item Reset */ .grid > * { width: 100%; margin: 0; } /* Gaps */ .g-10 { gap: 10px; } .g-20 { gap: 20px; } .row-gap-none { gap: 0; } /* Fixed Spacer [Tablet & Desktop] */ .spacer-xs { height: 1rem; } .spacer-s { height: 2rem; } .spacer-m { height: 3rem; } .spacer-m-l { height: 4rem; } .spacer-l { height: 5rem; } .spacer-xl { height: 6rem; } .spacer-xxl { height: 7rem; } /* Fixed Spacer [Mobile] */ @media (width < 60em) { .spacer-xs-mob { height: 1rem; } .spacer-s-mob { height: 2rem; } .spacer-m-mob { height: 3rem; } .spacer-m-l-mob { height: 4rem; } .spacer-l-mob { height: 5rem; } .spacer-xl-mob { height: 6rem; } .spacer-xxl-mob { height: 7rem; } } @media (width > 49em) { .spacer-header { height: .1rem; } } /* Misc Spacers */ .row-spacer { margin-top: var(--flow-spacer, 1.7rem); } button.block-margin { margin-top: var(--spacing-xl); } .block-margin { margin-top: var(--spacing-xl); } .block-flow * + * { margin-top: var(--flow-spacer, 1.7rem); } .button-flow { margin-top: .9rem; } .title-flow { display: flex; flex-direction: column; gap: clamp(1rem, 1.392rem + 0.54vw, 2rem); } .title-flow.center { margin-inline: auto; text-align: center; } .title-flow.right { margin-right: 0; margin-left: auto; text-align: flex-end; } /* Flexbox Utilities */ .flex { display: flex; } .flex-row { flex-direction: row; } .flex-col { flex-direction: column; } .flex-responsive { flex-direction: row; @media(max-width: 40em) { flex-direction: column; margin-inline: auto; gap: 3px; } } .grid-2col-adapt { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; @media(max-width: 50em) { display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; margin-inline: auto; row-gap: 40px; } } .g-l { @media(max-width: 50em) { row-gap: 100px; } } .grid-3col-adapt { display: grid; grid-template-columns: 1fr 1fr 1fr; column-gap: 40px; @media(max-width: 50em) { display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto auto; margin-inline: auto; row-gap: 40px; } } .grid-4col-adapt { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; column-gap: 40px; @media(max-width: 50em) { display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto auto; margin-inline: auto; row-gap: 40px; } } .justify-start { justify-content: flex-start; } .justify-center { justify-content: center; } .justify-end { justify-content: flex-end; } .justify-between { justify-content: space-between; } .align-start { align-items: flex-start; } .align-center { align-items: center; } .align-end { align-items: flex-end; } .middle { margin-inline: auto; } .middle-block { margin-block: auto; } @media (max-width: 60em) { .middle-mob { margin-inline: auto; } } .grid > * { /* border: var(--border); */ width: 100%; } .flex-2col { display: flex; gap: 2rem; @media (max-width: 50em) { flex-direction: column; gap: 2.5rem; } } .grid-fill { display: grid; grid-template-columns: repeat(auto-fill, minmax(390px, 1fr)); margin-inline: auto; gap: clamp(3rem, 2.273rem + 3.64vw, 5rem); max-width: 1090px; @media (max-width: 500px) { grid-template-columns: 1fr; } } .flex-copy { width: 700px; } .column { flex-direction: column; } .gap-3 { gap: 3rem; } @media (min-width: 50em) { .row-reverse-d { flex-direction: row-reverse; } } @media (min-width: 50em) { .col-reverse-d { flex-direction: column-reverse; } } @media (max-width: 50em) { .row-reverse { flex-direction: row-reverse; } } @media (max-width: 50em) { .col-reverse { flex-direction: column-reverse; } } /* ======================== */ /* Sticky */ /* ======================== */ .sticky { position: sticky; position: -webkit-sticky; height: 100%; background-color: rgba(255, 255, 255, .5); backdrop-filter: blur(5px); } @media (width > 49em) { .sticky-content { position: sticky; position: -webkit-sticky; top: 10em; height: 290px; } .sticky-xl { position: sticky; position: -webkit-sticky; top: 10em; height: 350px; } } /* ======================== */ /* Wrappers */ /* ======================== */ .contain { padding-inline: var(--site-edge); } /* Section Padding Variations */ .block-zero { padding-block: var(--section-space-m); padding-block: 0; } section { padding-block: clamp(3.5rem, 1.351rem + 4.24vw, 6.5rem); padding-inline: var(--site-edge); @media (max-width: 65em) { padding-inline: 6%; } } section:is(#hero) { padding-block: clamp(1.5rem, 0.351rem + 4.24vw, 6.5rem); padding-inline: var(--site-edge); @media (max-width: 65em) { padding-inline: 6%; } } section:is(#tall) { padding-block: clamp(4.5rem, 1.351rem + 6.24vw, 10.5rem); } section:is(#callout) { margin-inline: var(--site-edge); border-radius: var(--br-l); margin-bottom: var(--spacing-xl); } section:is(#zero) { padding-block: 0; } section:is(#projects) { padding-inline: var(--site-edge); padding-top: 0; @media (max-width: 65em) { padding-inline: unset; } } section:is(#title) { padding-block: clamp(3.5rem, 1.351rem + 4.24vw, 6.5rem); padding-inline: var(--site-edge); padding-bottom: 0px; @media (max-width: 65em) { padding-inline: 6%; } } section:is(.choc) { color: var(--oatmeal); background: var(--chocolate); } section:is(.oat) { color: var(--chocolate); background: var(--oatmeal); } /** HERO TEST SECTION **/ .page-hero-section { margin-top: 20px; } .container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { --bs-gutter-x: 1.5rem; --bs-gutter-y: 0; width: 100%; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: calc(var(--bs-gutter-x) * .5); margin-right: auto; margin-left: auto; } .page-hero-grid { display: grid; grid-template-columns: 1fr 1.8fr 1fr; gap: var(--spacing-m); margin-inline: auto; height: 100%; } @media (max-width: 1030px) { .page-hero-grid { grid-template-columns: 1fr; height: auto; grid-template-rows: 1fr .75fr; gap: 30px; } .hero-col.hero-col-right { flex-direction: row; display: flex; width: fit-content; margin-inline: auto; } } @media (max-width: 891px) { .page-hero-grid { grid-template-columns: 1fr; height: auto; } } @media (min-width: 891px and max-width: 1091px) { .hero-col-left { height: 35dvh; } } @media (max-width: 1191px) { .hero-col-left { height: 35dvh; } } @media (max-width: 768px) { .hero-right-top { display: none; } .hero-right-bottom { width: 100%; } } @media (min-width: 65em) { .hero-col { height: 82vh; } } .hero-col { display: flex; flex-direction: column; } .hero-col-left { border-radius: var(--br-l); gap: var(--spacing-s); } .hero-col-center { display: flex; border-radius: var(--br-l); } .hero-col-right { gap: var(--spacing-s); } .hero-col { display: flex; flex-direction: column; } .hero-image-tall { height: 100%; width: 100%; position: relative; border-radius: var(--br-l); overflow: hidden; } .hero-card-video { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; border-radius: var(--br-l); @media (max-width: 60em) { object-position: 50% 100%; transform: scale(1.3); } } .hero-main-card { background: var(--color-dark); border-radius: var(--br-l); display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; gap: var(--spacing-m); } .hero-right-top { flex: 1; border-radius: var(--br-l); overflow: hidden; position: relative; } .hero-video-small { width: 100%; height: 100%; position: relative; border-radius: var(--br-l); overflow: hidden; } .hero-card-video { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; } .hero-right-bottom { flex: 0 0 auto; border-radius: var(--br-l); } .hero-brand-card { border-radius: var(--br-l); padding: .55em; display: flex; flex-direction: column; } .service-row { display: grid; grid-template-columns: 1fr 1fr 1fr; @media (max-width: 1080px) { display: flex; flex-wrap: wrap; margin-inline: auto; } } .grid-hero-buttons { font-family: var(--ff-primary); text-align: center; display: flex; flex-direction: column; gap: 1em; max-width: 1380px; margin-inline: auto; padding-inline: var(--spacing-card); div { gap:1em; } button { transition: all ease 1s; height: 100%; display: flex; justify-content: center } button:hover { transform: scale(1.05); transition: all ease 0.2s; } .three-col { width: 100%; h3 { font-size: calc(1.4 * var(--fs-h3)); text-transform: uppercase; font-weight: var(--fw-bold); } p { margin-top: 25px; text-transform: uppercase; } } } .project-tabs { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; } .project-tabs:is(#overlay) { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; position: absolute; z-index: 2; bottom: 15px; left: 15px; .tab { border-radius: 2px; } } a#branding.tab { background: var(--yellow-l); } a#branding.tab:hover { background: var(--yellow); } a#marketing.tab { background: var(--lime-l); } a#marketing.tab:hover { background: var(--lime); } a#website.tab { background: var(--baby-blue-l); } a#website.tab:hover { background: var(--baby-blue); } a#materials.tab { background: var(--pink-l); } a#materials.tab:hover { background: var(--pink); } a#packaging.tab { background: var(--yellow-l); } a#packaging.tab:hover { background: var(--yellow); } a#photo.tab { background: var(--purple-l); } a#photo.tab:hover { background: var(--purple); } .tab { padding: 5px 8px 0px 8px; width: fit-content; font-size: calc(0.9 * var(--fs-p)); transition: 2s ease; text-transform: uppercase; font-family: var(--ff-handwriting); } .tab:hover { transform: translateY(-10%); transition: .1s ease; } .hero-container { display: flex; gap: 20px; /* spacing between columns */ margin: 0 auto; overflow: hidden; /* ensures corners clip content */ height: 80dvh; } .hero-text, .hero-image { flex: 1; /* 50/50 layout */ display: flex; flex-direction: column; justify-content: center; padding-block: clamp(20px, 1.3676rem + 5.4103vw, 40px); border-radius: var(--br-s); /* rounded corners */ justify-content: space-between; min-height: 90%; } .hero-buttons { display: flex; gap: 15px; flex-wrap: wrap; font-size: var(--fs-p); align-content: center; align-items: center; justify-content: flex-start; } .btn-secondary { margin-block: auto; background: #f1f1f124; padding: 0.6em var(--btn-padding-inline) 0.5em var(--btn-padding-inline); border-radius: var(--btn-border-radius); transition: all 0.3s ease; } .btn-secondary:hover { text-decoration: underline; text-decoration-thickness: 2px solid; transition: all 0.3s ease; } /* Subline as tick list */ .subline-list { list-style: none; padding: 0; margin: 0; gap: 0.3em; text-wrap: nowrap; } .subline-list li a { position: relative; font-size: var(--fs-p); padding: 10px 15px 8px 15px; justify-content: flex-start; position: relative; display: flex; color: var(--chocolate); flex-direction: row; gap: 10px; font-family: var(--ff-primary); text-transform: uppercase; font-weight: var(--fw-bold); font-size: var(--fs-h3); } .hero-image img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; /* matches hero container */ min-height: fit-content; } /* RESPONSIVE: stack on mobile */ @media (max-width: 1068px) { .hero-container { flex-direction: column; gap: 30px; /* spacing between stacked blocks */ margin-block: 40px; height: 100%; } } .hero-btn-base { color: var(--chocolate); padding: 2em 1.5em; border-radius: var(--btn-border-radius); width: 100%; margin-inline: auto; display: flex; flex-direction: column; gap: 20px; font-size: var(--fs-btn); height: 100%; justify-content: center; } .callout { background: var(--chocolate); padding: var(--spacing-xl) var(--spacing-xl); border-radius: var(--br-l); box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.08); } .callout:is(#pink) { background: var(--pink); color: var(--chocolate); } .small { max-width: 40%; } .med { max-width: 60%; } .hero-image { background-position: center top; background-size: cover; } @supports (background-image: image-set(url('x') type('image/webp'))) { .hero-image { background-image: image-set( url('/wp-content/themes/astra-child/assets/prof/heroprofimg.webp') type('image/webp'), url('/wp-content/themes/astra-child/assets/prof/heroprofimg.jpg') type('image/jpeg') ); } } .hero-copy { text-align: center; position: relative; bottom: 10dvh; width: 300px; /* color: white; */ background: #2d2d4c00; /* backdrop-filter: var(--backdrop-filter); */ padding: 40px; background: var(--yellow); margin-inline: auto; transform: rotate(5deg); border: 4px dashed var(--purple); } .hero-image:is(#functionwell) { background: url('/wp-content/themes/astra-child/assets/fw/fwbillboard.jpg'); height: 100dvh; background-position: center top; background-size: cover; @media (max-width: 500px) { height: 50dvh; } } .hero-image:is(#theecc) { background: url(/wp-content/themes/astra-child/assets/ecc/anisha-lead-1.jpg); height: 60dvh; background-position: center 40%; background-size: cover; @media (max-width: 700px) { background-size: cover; height: 30dvh; } } .hero-image:is(#branding) { background: url(../assets/ecc/theecc-businesscard-held.jpg); height: 100dvh; background-position: center center; background-size: cover; @media (max-width: 700px) { background: url(../assets/ecc/theecc-businesscard-held.jpg); background-size: contain; } } .bg-image:is(#theecc) { background: url('/wp-content/themes/astra-child/assets/ecc/socialbanner-2880x1800.jpg'); height: 100dvh; background-position: center bottom; background-size: cover; @media (max-width: 480px) { background: url(/wp-content/themes/astra-child/assets/ecc/socialmedia-vertical.jpg); background-size: cover; height: 100%; } } .bg-image:is(#prof) { background: url('/wp-content/themes/astra-child/assets/prof/thinking.png'); background-position: center bottom; background-size: cover; @media (max-width: 480px) { background: url(/wp-content/themes/astra-child/assets/prof/sitting-vertical.png); background-size: cover; height: 100%; } } div#support.title-flow { max-width: 40ch; margin-top: 150px; } @media (max-width: 480px) { div#support.title-flow { margin-top: 450px; } } div#about.title-flow { max-width: 45ch; margin-top: 60px; } @media (max-width: 480px) { div#about.title-flow { margin-bottom: 363px; margin-top: 0; } } .anisha-hero { background: var(--anisha-blue); height: 60dvh; background-image: url(../assets/ecc/theecc-handprints.gif); background-repeat: no-repeat; background-position: right; background-position-y: center; background-size: cover; background-position-y: center; .logo-image { width: clamp(250px, 30.4vw + 2.2rem, 500px); margin-inline: auto; margin-top: 4em; } } /* ======================== */ /* Content Wrapping */ /* ======================== */ .contain-narrow { @media (width > 49em) { padding-block: calc(0.6 * (var(--section-space-m))); padding-inline: var(--site-edge); } } .contain-max { width: fit-content; } .clamp-xs { max-width: 500px; margin-inline: auto; } .clamp-s { max-width: 40ch; margin-inline: auto; } .clamp-m { max-width: 700px; margin-inline: auto; } .clamp-l { max-width: 800px; margin-inline: auto; @media (width > 85em) { padding-inline: 34px; } } .clamp-xl { max-width: 85dvw; margin-inline: auto; @media (width > 80em) { padding-inline: 75px; } } .clamp-xxl { max-width: 90dvw; margin-inline: auto; @media (width > 80em) { padding-inline: 55px; } } .clamp__single-post { max-width: 1080px; margin-inline: auto; padding-inline: var(--site-edge); } /* ======================== */ /* Content Positioning */ /* ======================== */ .container-right { padding-left: calc((100% - var(--max-width)) / 3); margin-left: auto; } .container-left { padding-right: calc((100% - var(--max-width)) / 3); margin-right: auto; } /* .container-right { padding-left: calc((100% - min(var(--max-width),calc(100% - (var(--site-edge) * 1)))) / 3); margin-left: var(--site-edge); } .container-left { padding-right: calc((100% - min(var(--max-width),calc(100% - (var(--site-edge) * 1)))) / 3); margin-right: var(--site-edge); } */ /* Alignment */ .center { margin-inline: auto; } .center-text, p.center, .center-all div, .center-content, .center-content svg, .center-content-mob, .center-content-desktop { text-align: center; } .center-all div, .center-content, .center-content svg, .center-content-mob, .center-content-desktop { margin-inline: auto; } .center-vertical { margin-block: auto; } .center-button { display: flex; justify-content: center; } .text-left, .left-align { text-align: left; } .text-right, .right-align { text-align: right; } .left-align { margin-right: auto; } .right-align { margin-left: auto; } .flex-row { display: flex; flex-direction: row; } .flex-column { display: flex; flex-direction: column; } .flex-inverse { display: flex; flex-direction: column-reverse; } .push-l { margin-left: auto; } .push-r { margin-right: auto; } .reset { margin-top: 0 !important; } .stretch { align-content: stretch; align-items: stretch; justify-content: stretch; justify-items: stretch; } /* Responsive Centering */ @media (width > 60em) { .center-content-desktop { text-align: center; margin-inline: auto; } } @media (width < 60em) { .center-content-mob { text-align: center; margin-inline: auto; } } /* ======================== */ /* Reverse Columns */ /* ======================== */ /* Inverse Content on Mobile */ @media (width < 49em) { .reverse-columns { display: grid; grid-template-columns: 1fr; grid-auto-flow: column; } .reverse-columns > * { grid-column: 1; /* Ensure all items are in the first column */ } .reverse-columns > *:nth-last-child(n+2) { order: 2; /* Reverse the order of items starting from the second last */ } } /* ============================= */ /* === Typography Utilities === */ /* ============================= */ /* Font Size Utilities */ .fs-title { font-size: var(--fs-large); } .fs-title-short { font-size: var(--fs-title-short); } .fs-subheading { font-size: var(--fs-subheading); } .fs-h2 { font-size: var(--fs-h2); } .fs-h3 { font-size: var(--fs-h3); } .fs-h4 { font-size: var(--fs-h4); } .fs-credits { font-size: var(--fs-credits);} .fs-project-title { font-size: calc(1.7*var(--fs-h4)); } .fs-project-title-xs { font-size: calc(1.5*var(--fs-h4)); } /* Line Height */ .lh-xs { line-height: var(--lh-xs); } .lh-s { line-height: var(--lh-s); } .lh-m { line-height: var(--lh-m); } .lh-l { line-height: var(--lh-l); } /* Font Family */ .ff-primary { font-family: var(--ff-primary); font-optical-sizing: auto; } .ff-secondary { font-family: var(--ff-secondary); font-optical-sizing: auto; } /* Font Weight Utilities */ .fw-light { font-weight: var(--fw-light); } .fw-normal { font-weight: var(--fw-normal); } .fw-medium { font-weight: var(--fw-medium); } .fw-semibold { font-weight: var(--fw-semibold); } .fw-bold { font-weight: var(--fw-bold); } /* Text Alignment */ .text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } /* Text Transform */ .uppercase { text-transform: uppercase; } .lowercase { text-transform: lowercase; } .capitalize { text-transform: capitalize; } .italic { font-style: var(--fs-italic); } .big { font-size: calc(1.1*var(--fs-h3)); font-weight: var(--fw-normal); padding-left: var(--spacing-xl); } /* .elegant { font-family: var(--ff-handwriting); font-size: var(--fs-h3); } */ .elegant { font-family: var(--ff-handwriting); font-size: calc(.7 * var(--fs-h1)); text-transform: uppercase; line-height: normal; } .text-stable { text-wrap: stable; } .focus { color: var(--clr-accent-400);} .handwritten { font-family: var(--ff-handwriting); line-height: var(--lh-xxs); font-size: calc(1.4 * var(--fs-p)); } .handwritten.fs-h2 { font-family: var(--ff-handwriting); line-height: 1.9rem; font-size: calc(0.85*var(--fs-h2)); max-width: 40ch; } .marker { font-family: var(--ff-handwriting); font-size: var(--fs-tag); padding: 0em 1em; } /* Special Links / Texts */ .underline-purple { color: inherit; text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 1.5px; text-underline-offset: 3px; } .highlight-load { background: linear-gradient(90deg, var(--yellow), var(--yellow-l)); background-repeat: no-repeat; background-size: 0% 100%; /* keep the animation paused until triggered */ } .highlight-load-orange { background: linear-gradient(90deg, var(--orange-l), var(--orange-l)); background-repeat: no-repeat; background-size: 0% 100%; /* keep the animation paused until triggered */ } .highlight-load.active { animation: highlight 1.2s ease-in forwards; } .highlight-load-orange.active { animation: highlight 2.2s ease-in forwards; } @keyframes highlight { to { background-size: 100% 100%; } } /* Animation */ @keyframes highlight { to { background-size: 100% 100%; } } @keyframes squiggleMove { from { background-position: 0 0; } to { background-position: -20px 0; } } h2 a, .text-link { text-decoration: underline 1.5px solid var(--purple); transition: text-decoration-color 1s ease; text-decoration-thickness: 3px; } h2 a:hover, .text-link:hover { text-decoration-color: var(--purple); } a.link-effect-d { background-position: 0 100%; background-repeat: repeat-x; background-size: 5px 3px; padding-bottom: 1.5px; width: fit-content; } a.link-effect-d:hover { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='squiggle-link' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift .8s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-20px);}}%3C/style%3E%3Cpath fill='none' stroke='hsl(30, 95%, 51%)' stroke-width='2' class='squiggle' d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3'/%3E%3C/svg%3E"); background-size: auto 3px; background-repeat: repeat-x; text-decoration: none; } .u-wavy { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='squiggle-link' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift .8s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-20px);}}%3C/style%3E%3Cpath fill='none' stroke='hsl(30, 95%, 51%)' stroke-width='2' class='squiggle' d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3'/%3E%3C/svg%3E"); background-size: auto 3px; background-repeat: repeat-x; text-decoration: none; background-position: 0 100%; background-repeat: repeat-x; background-size: 9px 3px; padding-bottom: .5px; width: fit-content; } /* ============================= */ /* === Effects & Interaction === */ /* ============================= */ /* Opacity */ .opacity-0 { opacity: 0; } .opacity-50 { opacity: 0.5; } .opacity-100 { opacity: 1; } /* Transitions */ .transition { transition: all 0.3s ease; } .transition-fast { transition: all 0.15s ease; } .transition-slow { transition: all 0.5s ease; } /* Hover Effects */ .hover\:text-primary:hover { color: var(--clr-primary); } .hover\:bg-secondary:hover { background-color: var(--clr-secondary); } /* Shadows */ .shadow { -webkit-box-shadow: rgba(0, 0, 0, 0.03) 0 1px 20px; -moz-box-shadow: rgba(0, 0, 0, 0.03) 0 1px 20px; box-shadow: rgba(0, 0, 0, 0.03) 0 1px 20px; } /* ============================= */ /* === Imagery & Icons === */ /* ============================= */ .cover { object-fit: cover; } .contain { object-fit: contain; } .image-max-cap { max-height: 65vh; } /* Icon Sizing */ .icon-xs { max-width: 75px; } .icon-s { max-width: 150px; } .icon-m { max-width: 200px; } .icon-l { max-width: 350px; } .icon-xl { max-width: 400px; } .icon-round { border-radius: 100vw; } /* Border Rounding */ .brdr-round { border-radius: var(--content-rounding); } .brdr-round-max { border-radius: var(--icon-rounding); } /* ============================= */ /* === Miscellaneous=== */ /* ============================= */ /* Scaling */ .shrink-m { transform: scale(0.7); } .shrink-l { transform: scale(0.85); } /* Hiding Content */ @media (width < 65em) { .hide-mob { display: none !important; } } @media (width > 65em) { .hide-desktop { display: none !important; } } .max40ch { max-width: 40ch; } /* Centre Content */ @media (width < 65em) { .center-mob { margin-inline: auto; text-align: center; } } @media (width > 65em) { .center-desktop { margin-inline: auto; text-align: center; } } /* Stacking & Layers */ .dropdown { z-index: var(--z-index-dropdown); position: relative; } .modal { z-index: var(--z-index-modal); position: relative; } .overlay { z-index: var(--z-index-overlay); } /* Cursors */ .cursor-pointer { cursor: pointer; } .cursor-default { cursor: default; } /* User Selection */ .select-none { user-select: none; } .select-text { user-select: text; } /* Scroll Behavior */ .scroll-smooth { scroll-behavior: smooth; } .scroll-auto { scroll-behavior: auto; } /* Anchors */ .anchor { display: block; height: 150px; /*same height as header*/ margin-top: -150px; /*same height as header*/ visibility: hidden; } a[href="#main-content"], a[href="#footer"] { position: absolute; inset-block-start: 1rem; inset-inline-start: 1rem; transform: translateY(-250%); padding-block: var(--btn-padding-block); padding-inline: var(--btn-padding-inline); min-inline-size: var(--btn-min-width); line-height: var(--btn-lh); font-size: var(--fs-m); font-weight: var(--btn-font-weight); font-style: var(--btn-font-style); text-decoration: var(--btn-text-decoration); text-transform: var(--btn-text-transform); letter-spacing: var(--btn-letter-spacing); border-width: var(--btn-border-width); border-style: var(--btn-border-style); border-radius: var(--btn-border-radius); display: var(--btn-display, inline-flex); text-align: center; justify-content: center; align-items: center; background: var(--btn-background); color: var(--btn-text-color); border-color: var(--btn-border-color); transition: all var(--btn-transition-duration) ease; background: var(--lime); color: white; display: inline-flex; } /* ============================= */ /* === Reset === */ /* ============================= */ /* ============================= */ /* === Reset === */ /* ============================= */ /* File Purpose: CSS Reset - Removes inconsistencies across browsers and resets default styles. Author: Victoria Cruse Version: 1.0.0 Add in header.php : */ /* Box sizing rules */ *, *::before, *::after { box-sizing: border-box; } /* Prevent font size inflation */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; -ms-text-size-adjust: none; text-size-adjust: none; scroll-behavior: smooth; } /* Remove default margin in favour of better control in authored CSS */ * { margin: 0; padding: 0; font: inherit; } /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */ ul[role='list'], ol[role='list'] { list-style: none; } /* Remove list styles on ul that has no specified class */ ul:not([class]) { list-style: none; } /* Scroll Behaviour */ html, body { height: 100%; overflow-x: hidden; scroll-behavior: smooth; } html:focus-within { scroll-behavior: smooth; } /* Set core body defaults */ body { text-rendering: optimizeSpeed; word-break: break-word; word-wrap: break-word; margin: 0; line-height: var(--lh-m); font-family: var(--ff-body); font-weight: var(--fw-normal); font-size: var(--fs-p); transition: background-color 0.3s ease, color 0.3s ease; scroll-padding-top: calc(50vh - 50px); letter-spacing: var(--letter-spacing-text); background: var(--site-bg); } /* Inherit font family across all elements for consistent design */ button, input, textarea, select { font: inherit; color: inherit; background: none; border: none; outline: none; cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: manipulation; appearance: none; /* Removes default styling on mobile inputs/selects */ } /* Ensure text inputs, textareas, and select elements remain usable */ input, textarea, select { cursor: text; user-select: auto; } /* Default focus styles for accessibility */ button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, a:focus-visible { outline: 2px solid mediumpurple; outline-offset: 7px; } /* Set shorter line heights on headings and interactive elements */ /* Balance text wrapping on headings */ h1, h2, h3, h4, h5, h6, p, blockquote, button, input, label { text-wrap: balance; } /* Make images easier to work with */ img, picture, svg { max-width: 100%; display: block; font-style: italic; background-repeat: no-repeat; background-size: cover; shape-margin: 1rem; transition: all 1s ease; } picture { height: 100%; } svg:hover { SCALE: 0.95; transition: all .5s ease; } img { } /* Link Features & Effects */ a { cursor: pointer; color: inherit; /* Ensures links take the text color by default */ text-decoration: none; /* Removes underlines unless specified */ transition: color 0.2s ease, opacity 0.2s ease; /* Smooth hover effects */ } /* Reset specific link styles in navigation and footer */ nav a, .footer a { text-decoration: none; } header, footer { z-index: var(--z-index-overlay); } /* Add borders to auto-filled areas */ input:-webkit-autofill, input:autofill { border-color: green; } input:-webkit-autofill::-webkit-text-fill-color, input:autofill::-webkit-text-fill-color { color: black; } /* Make sure textareas without a rows attribute are not tiny */ textarea:not([rows]) { min-height: 10em; } /* Anything that has been anchored to should have extra scroll margin */ :target { scroll-margin-block: 5ex; } /* Remove all animations, transitions and smoothing */ @media (prefers-reduced-motion: reduce) { html:focus-within { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } .title-centered { display: flex; justify-content: center; } /* ======================== */ /* Hero */ /* ======================== */ .hero-container .tag { width: fit-content; text-align: left; border-radius: var(--br-l); font-weight: var(--fw-normal); top: 0; z-index: var(--z-index-overlay); font-size: calc(1*var(--fs-h3)); font-family: var(--ff-handwriting); animation: slideDown 0.6s ease-out forwards; transform: translateY(100%); text-transform: uppercase; } @keyframes slideDown { to { transform: translateY(0); } } .site-lip { width: fit-content; text-align: center; border-radius: var(--br-l); font-weight: var(--fw-normal); top: 0; z-index: var(--z-index-overlay); font-size: calc(1.1*var(--fs-h3)); margin-inline: auto; font-family: var(--ff-handwriting); animation: slideDown 0.6s ease-out forwards; transform: translateY(-100%); } @keyframes slideDown { to { transform: translateY(0); } } .hero { display: flex; flex-wrap: wrap; box-sizing: border-box; align-items: center; justify-content: space-between; align-items: flex-end; gap: 2rem; } .hero-text { font-size: clamp(1.7rem, 1.236rem + 3.82vw, 4.6rem); } @media (max-width: 980px) { .hero { flex-direction: column; padding: 2rem; height: auto; } .hero-slider { max-width: 100%; order: 1; width: 100%; } } /* ======================== */ /* Services */ /* ======================== */ .project-tracker_block { color: var(--oatmeal); justify-content: space-between; align-items: center; width: 100%; padding: 1em 2em; display: flex; max-width: 980px; border: .1em dashed var(--oatmeal); } .project-tracker_right-wrap { grid-column-gap: 2em; grid-row-gap: 2em; display: flex; } .project-tracker_text-wrap { padding-right: .5em; } .availability-text { text-transform: uppercase; font-family: var(--ff-handwritten); } .project-tracker_availability-wrap { display: flex; flex-direction: row; gap: 1em; } @media (max-width: 780px) { .project-tracker_block { flex-direction: column; gap: 20px; } .project-tracker_right-wrap { flex-direction: column; grid-row-gap: .5em; align-items: center; } .project-tracker_left-wrap h4 { font-size: calc(1.1 * var(--fs-h4)); } } .carousel-wrapper { width: 100%; overflow: hidden; display: flex; flex-direction: column; gap: 1rem; } .portfolio-wrapper-border { border: 0.15em dashed var(--chocolate); padding: var(--spacing-card); } .carousel-track { display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; gap: clamp(1rem, 0.568rem + 2.16vw, 1.3rem); scrollbar-width: none; } .carousel-track::-webkit-scrollbar { display: none; } .carousel-slide { flex: 0 0 clamp(22.125rem, 22.044rem + 8.41vw, 69.125rem); scroll-snap-align: start; box-sizing: border-box; overflow-y: hidden; padding-bottom: 10px; position: relative; @media (max-width: 55em) { flex: 0 0 93%; } } /* ======================== */ /* Testimonials */ /* ======================== */ .testimonial-content { padding: 25px; display: flex; gap: 20px; flex: 0 0 clamp(22.125rem, 22.044rem + 3.41vw, 39.125rem); } .stars { color: var(--orange-d); } .carousel-slide img { border-radius: var(--br-s); object-fit: cover; width: 100%; aspect-ratio: 4/5; border: unset; margin-inline: auto; @media (min-width: 55em) and (max-width: 70em) { aspect-ratio: 5/3; } @media (min-width: 70em) { width: 100%; aspect-ratio: 5/4; object-position: 50% 80%; } } .carousel-slide.tall img { aspect-ratio: 3/3; } .carousel-slide.wide img { aspect-ratio: 3/3; } .carousel-slide.testimonial-content { transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* smooth easing */ cursor: pointer; /* optional, signals interactivity */ } .carousel-slide.testimonial-content.c-1 { transform: rotate(2deg) scale(0.85); } .carousel-slide.testimonial-content.c-2 { transform: rotate(-3deg) scale(0.9); } .carousel-slide.testimonial-content.c-3 { transform: rotate(5deg) scale(0.85); } .carousel-slide.testimonial-content:hover { transform: rotate(0deg) scale(.95); /* final hover state: straight & full size */ } #svg { aspect-ratio: unset; border: unset; } .carousel-dots { display: flex; justify-content: center; align-items: center; gap: 8px; } .carousel-dots .carousel-dot { width: 9px; height: 9px; background-color: var(--pink-d); border-radius: 999px; transition: all 0.3s ease; flex-shrink: 0; } .carousel-dots .carousel-dot.active { width: 20px; background-color: var(--pink); } .project-title { font-family: var(--ff-primary); padding-bottom: 12px; line-height: var(--lh-xs); font-size: var(--fs-tag); text-transform: uppercase; font-weight: var(--fw-bold); } .project-subtitle { font-weight: var(--fw-light); } .project-description { font-size: calc(0.95*var(--fs-h4)); display: flex; flex-direction: column; gap: 6px; margin-top: 3px; text-align: center; } @media (max-width: 60em) { .project-description { padding-inline: var(--site-edge); } } .refresh-container { background: var(--lime); border-radius: 999px; border: 1px solid var(--dark); } .freebie-section { display: flex; flex-wrap: wrap; flex-direction: column; align-items: stretch; justify-content: space-between; gap: 1rem; margin-left: 0; } .progress-container { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; flex-direction: column; } .step { background: rgba(0, 0, 0, 0.04); padding: .5em 1em; border-radius: var(--br-l); text-align: center; } .arrow { font-size: 1.2rem; color: #c96480; } .cta-button { background: #2d2d4c; color: #ffffff; text-decoration: none; padding: 0.6rem 1.25rem; border-radius: 30px; font-weight: 500; transition: background 0.25s ease; white-space: nowrap; } @keyframes move { 100% { transform: translate3d(0, 0, 1px) rotate(360deg); } } .cta-strip { padding: 0; margin: 0; } .modal-content .close { position: absolute; top: 1rem; right: 1rem; font-size: 1.5rem; background: none; border: none; cursor: pointer; } /*** MAIN DESIGNS ***/ .pill { display: flex; width: fit-content; padding: .4em 0em; border-radius: var(--br-l); backdrop-filter: blur(2px); display: flex; flex-direction: row; align-items: center; gap: .8rem; transition: all 1s ease; margin-left: 0; position: relative; font-size: clamp(1.15rem, 1.059rem + 0.45vw, 1.4rem); font-weight: var(--fw-normal); justify-content: space-between; } .home { padding: .8em; border-radius: var(--br-s); width: 100%; } .home-d { background: var(--lime-l); padding: .6rem .9rem; border-radius: 8px; width: fit-content; transition: all 1s ease; } .home-d:hover { background: #c1c1c13b; } .home-d .plus { color: var(--dark); transition: all 1s ease; } .home-d .pill:hover .plus { color: var(--lime); } .home-d .pill:hover { color: var(--dark); } .tags .pill { text-transform: uppercase; font-size: var(--fs-small); } .pill:hover { transition: all 1s ease; opacity: 1; } .cta { position: relative; margin: auto; padding: 6px 19px; transition: all 0.2s ease; border: none; background: none; cursor: pointer; display: flex; right: 10%; bottom: 20%; background: #ffffffb0; border-radius: var(--br-m); backdrop-filter: var(--backdrop-filter); margin-right: 0; margin-left: auto; } /* .cta:before { content: ""; position: absolute; top: 0; left: 0; display: block; border-radius: 40px; background: var(--main); width: 35px; height: 35px; transition: all 0.3s ease; } */ .cta span { position: relative; transition: all .5s; } .cta:hover span { transition: all 1s; letter-spacing: 1px; font-weight: 400; } .cta svg { position: relative; top: 0; margin-left: 10px; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke: var(--lime); stroke-width: 1.51; transform: translateX(-5px); transition: all 0.3s ease; } .cta:hover:before { width: 100%; background: var(--lime); height: 37px; } .cta:hover svg { transform: translateX(0); } .cta:active { transform: scale(0.95); } /* Default: hide the over-image button on desktop */ .cta-over-image { display: none; } /* Mobile only */ @media (max-width: 768px) { .carousel-slide { position: relative; } @keyframes pulse { 0% { transform: translateX(-50%) scale(1); opacity: 1; } 50% { transform: translateX(-50%) scale(1.05); opacity: 0.85; } 100% { transform: translateX(-50%) scale(1); opacity: 1; } } .cta-over-image { display: block; position: absolute; bottom: 15%; /* roughly bottom third */ left: 55%; transform: translateX(-50%); background: var(--lime); /* or your desired brand color */ border: var(--border); padding: 0.75rem 1.25rem; border-radius: var(--br-s); z-index: 2; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15); animation: pulse 2.5s ease-in-out infinite; } .cta-over-image span { } } /******/ /*** PROJECTS ***/ /******/ .card-grid-2 { display: flex; flex-direction: row; gap: 2rem; @media (max-width: 700px) { flex-direction: column; } } .card-grid.card-grid-3 { grid-template-columns: 1fr 1fr 1fr; @media (max-width: 60em) { grid-template-columns: 1fr; } } .card-transparent { display: flex; flex-direction: column; border-radius: var(--br-m); padding: var(--spacing-card); align-items: center; gap: 2rem; width: 100%; height: auto; text-align: center; justify-content: space-between; } .hover-card { position: relative; overflow: hidden; } .hover-circle { position: absolute; width: 85px; height: 85px; background: rgba(255, 255, 255, 0.774); color: var(--clr-neutral-800); border-radius: 50%; font-size: var(--fs-small); text-transform: lowercase; display: flex; justify-content: center; align-items: center; pointer-events: none; transform: translate(-50%, -50%) scale(0); transition: transform 0.2s ease, opacity 0.2s ease; z-index: 10; backdrop-filter: blur(3px); border: 1px solid white; } .hover-swap-img { transition: opacity 0.1s ease, filter 0.1s linear; display: block; width: 100%; height: auto; } .hover-swap-img.fade-out { transition: opacity 0.1s ease, filter 0.1s linear; filter: blur(4px); } .coming-soon-badge { position: absolute; top: 15px; right: 15px; background: #c4bcca4f; color: white; padding: .3em 1em .0em 1em; border: .12em dashed var(--oatmeal); font-family: var(--ff-handwriting); text-transform: uppercase; z-index: var(--z-index-overlay); pointer-events: none; font-size: var(--fs-credits); backdrop-filter: var(--backdrop-filter); letter-spacing: .5px; } .card-nude { border-radius: var(--br-s); margin-inline: auto; width: 100%; } .card-title { /* padding: 10px 20px; */ margin-top: 30px; /* background: white; */ border-radius: 10px; text-align: center; width: fit-content; margin-inline: auto; font-size: var(--fs-p); font-weight: var(--fw-normal); /* border: 1px solid var(--white); */ /* color: var(--dark); */ font-family: var(--ff-handwriting); text-transform: uppercase; font-size: var(--fs-h3); color: var(--white); } .brands { padding: 30px 40px; background: #f4f4f496; border-radius: 0px 0px var(--br-s) var(--br-s); height: 125px; } .goal-card { background: var(--white); padding-inline: 30px; padding-block: 30px; border-radius: var(--br-s); display: flex; justify-content: flex-start; h3 { font-size: var(--fs-h4); } } .goal-card { .inner-h { display: flex; flex-direction: row; align-items: stretch; gap: 20px; @media (max-width: 70em) { flex-direction: column; gap: 30px; } } } /* Contact Banner */ /* From Uiverse.io by mrhyddenn */ .btn-primary { position: relative; width: fit-content; height: fit-content; background: var(--purple); padding: var(--btn-padding); outline: none; text-decoration: none; display: flex; justify-content: center; align-items: center; cursor: pointer; border-radius: var(--btn-border-radius); z-index: 0; overflow: hidden; transition: all 0.3s cubic-bezier(0.02, 0.01, 0.47, 1); gap: 10px; color: var(--chocolate); font-family: var(--ff-button); font-size: var(--btn-font-size); text-transform: uppercase; font-weight: var(--btn-font-weight); } .btn-primary:hover { animation: 0.5s ease-in-out both; } .contact-button { position: relative; width: fit-content; background: var(--purple); padding: calc(0.5* var(--btn-padding-block)) calc(0.8* var(--btn-padding-inline)); outline: none; text-decoration: none; display: flex; justify-content: center; align-items: center; cursor: pointer; border-radius: var(--btn-border-radius); z-index: 0; overflow: hidden; transition: all 0.3s cubic-bezier(0.02, 0.01, 0.47, 1); gap: 10px; color: var(--chocolate); font-family: var(--ff-button); font-size: var(--btn-font-size); font-weight: 500; text-wrap: nowrap; min-width: fit-content; } .lift-up { margin-inline: auto; margin-top: -20%; } .text-button { font-size: var(--fs-h2); text-decoration: none; position: relative; transition: all .5s; letter-spacing: inherit; color: var(--chocolate); top: 85%; margin-left: auto; margin-right: 0; display: flex; flex-direction: row; gap: 20px; width: fit-content; margin-right: 20px; align-items: flex-end; } .text-button svg { opacity: 0.3; } .carousel-slide:hover .text-button { letter-spacing: 2px; transition: all .5s; font-size: calc(0.8*var(--fs-h1)); } .carousel-slide:hover .text-button svg { opacity: 1; } .carousel-slide:hover svg { color: var(--site-bg); } @keyframes sh0 { 0% { transform: rotate(0deg) translate3d(0, 0, 0); } 25% { transform: rotate(7deg) translate3d(0, 0, 0); } 50% { transform: rotate(-7deg) translate3d(0, 0, 0); } 75% { transform: rotate(1deg) translate3d(0, 0, 0); } 100% { transform: rotate(0deg) translate3d(0, 0, 0); } } .btn-primary:hover span { animation: storm 0.7s ease-in-out both; animation-delay: 0.06s; } .btn-primary::before, .btn-primary::after { content: ''; position: absolute; right: 0; bottom: 0; width: 100px; height: 100px; border-radius: 50%; background: #fff; opacity: 0; transition: transform 0.15s cubic-bezier(0.02, 0.01, 0.47, 1), opacity 0.15s cubic-bezier(0.02, 0.01, 0.47, 1); z-index: -1; transform: translate(100%, -25%) translate3d(0, 0, 0); } .btn-primary:hover::before, .btn-primary:hover::after { opacity: 0.15; transition: transform 0.2s cubic-bezier(0.02, 0.01, 0.47, 1), opacity 0.2s cubic-bezier(0.02, 0.01, 0.47, 1); } .btn-primary:hover::before { transform: translate3d(50%, 0, 0) scale(0.9); } .btn-primary:hover::after { transform: translate(50%, 0) scale(1.1); } .btn-primary:hover { background-color: var(--lime); letter-spacing: 1px; } .button-wrapper { margin-right: 0; margin-left: auto; margin-top: 90%; position: relative; @media (max-width: 55em) { margin-top: 100%; margin-bottom: 10px; } } .contact-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); justify-content: center; align-items: center; z-index: 9999; } .contact-overlay.active { display: flex; } .contact-content { background: #0000006e; padding: clamp(2rem, 0.545rem + 7.27vw, 4rem); width: 100%; position: relative; animation: fadeInUp 0.3s ease; height: 100%; overflow: auto; display: flex; flex-direction: row; gap: 3rem; align-items: center; @media (max-width: 800px) { flex-direction: column; padding-top: 5rem; } } .contact-text { color: var(--site-bg); display: flex; gap: 3rem; flex-direction: column; flex: 1; @media (max-width: 900px) { flex-direction: column; } } .contact-title { margin-left: 0; max-width: 600px; padding-bottom: 3rem; border-bottom: 1px solid #8d8b8b; h2 {color: var(--site-bg); } } .contact-details { display: flex; flex-direction: column; justify-content: space-between; gap: clamp(2rem, 1.784rem + 1.08vw, 3rem); margin: unset; div { margin: unset; } @media (min-width: 600px) and (max-width: 800px) { flex-direction: row; } @media (max-width: 600px) { flex-direction: column; } } .close-button { position: absolute; top: 30px; right: 30px; background: transparent; border: none; font-size: 50px; cursor: pointer; transition: all .5s ease; color: var(--site-bg); } .close-button:hover { color: var(--lime); } form { display: flex; flex-direction: column; gap: 1em; margin-top: 2rem; flex: 1; width: 100%; } form input, form textarea { padding: 0.8em; border: 1px solid #ccc; border-radius: var(--br-s); font-family: inherit; } form button[type="submit"] { color: var(--clr-neutral-800); background: var(--lime); padding: .5em 1.5em; border: var(--border); border-radius: 100px; cursor: pointer; width: 100%; margin-right: 0; margin-left: auto; font-size: var(--fs-primary-button); transition: all .5s ease; } form button[type="submit"]:hover { letter-spacing: 1px; font-weight: 400; background: var(--lime); } @keyframes fadeInUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } .services-pills { /*display: flex; flex-direction: column; flex-wrap: wrap; gap: 10px; margin-top: clamp(1rem, 0.784rem + 1.08vw, 2rem); */ display: flex; flex-direction: column; gap: 16px; } #teams.services-pills { display: flex; flex-direction: column; flex-wrap: wrap; gap: 0.2em 1em; margin-top: clamp(1rem, 0.784rem + 1.08vw, 2rem); margin-inline: unset; } .services-pills .pill:hover { scale: 0.95; cursor: pointer; color: var(--lime); } .pill svg.dot { fill: var(--lime); width: 0.5em; height: 0.5em; margin-right: 0.25em; } .pill .plus { font-weight: normal; font-size: 1.5em; margin-left: 0.2em; color: var(--site-bg); transition: all 1s ease; margin-top: .2em; } .pill:hover .plus { color: var(--lime); } /* Modal Styles */ .pill-modal { position: fixed; inset: 0; display: none; justify-content: center; align-items: center; background: rgba(0,0,0,0.5); z-index: 1000; backdrop-filter: blur(5px); /* 💡 the blur magic */ -webkit-backdrop-filter: blur(5px); /* for Safari */ opacity: 0; transition: opacity 0.3s ease; overflow-y: scroll; } .pill-modal.active { display: flex; opacity: 1; } .modal-content li { color: var(--twhitebg); } .modal-content { background: var(--site-bg); padding-block: clamp(1.3rem, 1.045rem + 1.27vw, 2rem); padding-inline: clamp(1rem, 0.636rem + 1.82vw, 2rem); max-width: 700px; width: 90%; border-radius: 1rem; position: relative; animation: fadeInUp 0.3s ease; display: flex; flex-direction: column; gap: 1rem; overflow-y: scroll; } .modal-content h3 { margin-top: 0; font-size: calc(1.2*(var(--fs-h3))); font-weight: 500; color: var(--dark); margin-right: 10px; line-height: var(--lh-s); } .modal-content .close { position: absolute; top: 1rem; right: 1rem; font-size: 1.4rem; border: none; background: transparent; cursor: pointer; color: var(--dark); } /* Animation */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* ======================== */ /* FAQ */ /* ======================== */ .faq-wrapper { justify-content: space-between; display: grid; column-gap: 5%; background: var(--chocolate); grid-template-columns: 1.5fr 2fr; color: var(--oatmeal); padding-inline: clamp(1.23175rem, -26.5351rem + 91.5577vw, 3rem); padding-block: 3rem; border-radius: var(--br-l); @media (width <50em) { grid-template-columns: 1fr; row-gap: 3rem; } } .faq-tabs { display: flex; text-align: center; justify-content: space-between; gap: 10px; width: 100%; flex-direction: column; } .faq-tabs-title { font-size: var(--fs-h2); } .faq-tab { cursor: pointer; padding: 0.6em 1em .2em 1em; border: 0.15em dashed var(--purple); font-family: var(--ff-handwriting); background: var(--yellow); color: var(--chocolate); letter-spacing: var(--letter-spacing); line-height: .9em; } .faq-tab:hover { background: var(--purple); } .faq-tab.active { font-weight: var(--fw-extrabold); background: var(--purple); border: 0.1em dashed var(--purple); } .faq-item { padding-inline: none; } .faq-items { width: 100%; margin-right: 0; margin-left: auto; display: flex; flex-direction: column; gap: 10px; } .faq-question { font-size: var(--fs-h4); cursor: pointer; position: relative; display: flex; justify-content: space-between; transition: all 1s ease; opacity: 0.9; } #project.faq-question { color: unset; background: var(--orange); padding: 20px; border-radius: var(--br-s); font-weight: var(--fw-light); } #project.faq-question::after { color: var(--black); } .faq-question:hover { color: var(--lime); transition: all .5s ease; scale: 1.01; } .faq-question.active { color: var(--yellow); opacity: 1; } .faq-answer { display: none; margin-top: 1.5rem; line-height: var(--lh-l); letter-spacing: 0; width: 100%; background: #fff5e91f; padding: var(--spacing-m); border-radius: var(--br-s); } .faq-question::after { font-size: 40px; content: "+"; position: relative; font-weight: 100; color: var(--site-bg); padding-left: 10px; transition: color 0.3s ease; display: flex; align-items: center; } .faq-question:hover::after { color: var(--lime); } .faq-question.active::after { content: "–"; color: var(--lime); } .tools-column { display: grid; gap: clamp(1.875rem, 2.77vw + 1.051rem, 3.375rem); grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); padding: var(--spacing-card); border-radius: var(--br-l); margin-block: var(--spacing-l); justify-items: center; img, svg { object-fit: contain; transition: transform .5s ease; border-radius: var(--br-s); min-height: clamp(2.875rem, 2.77vw + 1.051rem, 4.375rem); max-height: clamp(2.875rem, 2.77vw + 1.051rem, 4.375rem); width: auto; margin-block: auto; border-radius: unset; border: unset; } img:hover { transform: scale(1.1); } } /* ABOUT */ .note_block { z-index: 2; grid-column-gap: .5em; grid-row-gap: .5em; background-color: var(--pink-l); flex-flow: column; justify-content: center; align-items: flex-start; width: auto; padding: 1.2em 1.3em; display: flex; position: absolute; bottom: -5%; left: -6%; transform: rotate(2.8deg); box-shadow: 0 3px 6px rgba(0,0,0,0.15); border: 2px dashed white; border-radius: var(--btn-border-radius); .handwritten { font-size: clamp(1rem, 0.855rem + 0.73vw, 1.4rem); } } .note_block_free { z-index: 2; grid-column-gap: .5em; grid-row-gap: .5em; flex-flow: column; justify-content: center; align-items: flex-start; width: auto; padding: 1.2em 1.3em; display: flex; transform: rotate(2.8deg); box-shadow: 0 3px 6px rgba(0,0,0,0.15); position: relative; width: 400px; margin-left: 70px; margin-bottom: 120px; margin-top: 50px; border: 2px dashed white; border-radius: var(--btn-border-radius); } .pin { position: absolute; top: -12px; right: 20px; width: 18px; height: 18px; background: #d84b4b; /* classic red pin */ border-radius: 50%; box-shadow: 0 3px 6px rgba(0,0,0,0.25), inset -2px -3px 4px rgba(0,0,0,0.25); transform: rotate(-10deg); z-index: 3; } .pin::after { content: ""; position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: 2px; height: 18px; background: #999; border-radius: 2px; } .tape { background-color: hsla(0, 0%, 100%, .2); box-shadow: inset 0 0 .3em .3em hsla(0, 0%, 100%, .1); height: 2.3em; position: absolute; z-index: 4; transform: rotate(-10deg); width: 9em; -webkit-filter: drop-shadow(0 1px 1px hsla(0, 0%, 0%, .3)); top: -15px; left: 50px; } .tape:after, .tape:before { background-size: .4em .4em; bottom: 0; content: ''; position: absolute; top: 0; width: .2em; } .tape:after { background-image: linear-gradient(45deg, transparent 50%, hsla(0,0%,100%,.3) 50%), linear-gradient(-45deg, transparent 50%, hsla(0,0%,100%,.3) 50%); background-position: 0 100%; left: -.2em; } .tape:before { background-image: linear-gradient(135deg, transparent 50%, hsla(0,0%,100%,.3) 50%), linear-gradient(-135deg, transparent 50%, hsla(0,0%,100%,.3) 50%); background-position: 100% 100%; right: -.2em; } .tape-label::after { content: "VICTORIA"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--ff-whiteboard); font-size: calc(1.4*var(--fs-h3)); color: var(--chocolate); } .img-about { position: relative; /* makes this the positioning parent */ display: inline-block; /* prevents weird full-width stretching */ } .img-about img { display: block; /* removes bottom whitespace gap */ width: 100%; /* optional, if responsive */ transform: rotate(-3deg); height: clamp(25.75rem, 11.932rem + 34.09vw, 33.5rem); border-radius: var(--br-m); } .about-img-wrapper { width: 90%; display:flex; flex-direction: column; } /*. CTA */ .cta-video { min-height: 50vh; width: 70%; } @media(max-width: 55em) { .cta-wrapper { flex-direction: column; gap: 40px; } .cta-video { min-height: 30vh; width: unset; } } .freebie-content { display: flex; flex-wrap: wrap; gap: 3rem; align-items: flex-start; justify-content: space-between; } .freebie-text { flex: 1 1 45%; } .freebie-form { flex: 1 1 45%; background-color: var(--white); padding: var(--spacing-xl) var(--spacing-l); box-shadow: 0px 0px 5px rgba(0,0,0,0.08); display: flex; flex-direction: column; align-content: center; gap: 2rem; border: 0.15em dashed var(--purple); .title { font-size: var(--fs-h4); margin-inline: auto; font-weight: var(--fw-bold); text-transform: uppercase; color: var(--chocolate); } } .freebie-steps { list-style: decimal inside; margin-bottom: 1.5rem; color: #2d2d4c; padding-left: 1rem; } .refresh-btn { display: inline-block; background-color: var(--purple); padding: 0.85rem 2.5rem; border-radius: 0; font-weight: 600; text-decoration: none; transition: all 0.5s; max-width: fit-content; margin-inline: auto; } .refresh-btn:hover { background-color: var(--lime); letter-spacing: 1px; } /* Responsive stacking */ @media (max-width: 768px) { .freebie-content { flex-direction: column; } .freebie-text, .freebie-form { flex: 1 1 100%; } } .services-list ul { display: flex; flex-direction: column; gap: clamp(1.5rem, 1.176rem + 1.62vw, 3rem); font-weight: 300; } .services-list li { font-size: calc(0.6 * var(--fs-h2)); display: flex; line-height: var(--lh-s); } .services-list li svg { width: 40px; height: auto; padding-right: 20px; } .services-list ul li { opacity: 0; transform: translateY(50px); transition: transform 0.8s ease, opacity 0.8s ease; } .services-list ul li.animate-in { opacity: 1; transform: translateY(0); } /* Optional: slightly stagger the appearance */ .services-list ul li:nth-child(1).animate-in { transition-delay: 0.05s; } .services-list ul li:nth-child(2).animate-in { transition-delay: 0.15s; } .services-list ul li:nth-child(3).animate-in { transition-delay: 0.25s; } .services-list ul li:nth-child(4).animate-in { transition-delay: 0.35s; } .services-list ul li:nth-child(5).animate-in { transition-delay: 0.45s; } .services-list ul li:nth-child(6).animate-in { transition-delay: 0.55s; } .services-list ul li:nth-child(7).animate-in { transition-delay: 0.65s; } .services-list ul li:nth-child(8).animate-in { transition-delay: 0.75s; } /**** Projects ***/ .container { display: flex; flex-direction: column; } @media (min-width: 1024px) { .container { flex-direction: row; min-height: 100vh; } } /* LEFT BANNER */ .sidebar { width: 100%; padding: 3rem var(--site-edge); position: relative; background: var(--dark); color: white; } @media (min-width: 1024px) { .sidebar { width: 35%; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; border-right: var(--border); } } .sidebar h1 { margin-bottom: 1rem; } .sidebar p { color: var(--light-text); } /* RIGHT GRID */ .main { width: 100%; padding: 0; display: grid; grid-template-columns: 1fr; gap: 4rem 2rem; margin-top: 10px; } @media (min-width: 768px) { .main { grid-template-columns: repeat(2, 1fr); padding: var(--spacing-xl) 5%; } } /* PROJECT CARD */ .card { display: flex; flex-direction: column; } .card .card-service { min-height: 270px; } .card img { width: 100%; height: 500px; object-fit: cover; @media (max-width: 60em) { height: 60dvh; } } .card .button { position: absolute; bottom: 1rem; right: 1rem; background: var(--lime); border-radius: 50%; padding: 15px 20px; box-shadow: 0 2px 6px rgba(0,0,0,0.15); cursor: pointer; transition: background 0.2s ease; border: var(--border) } .card .button:hover { background: var(--dark); color: white; } .card-content { padding: .5rem; } .card-content h2 { margin: 0 0 0.5rem; font-size: var(--fs-h3); } .card-content p { margin-bottom: 0.75rem; } .tags { display: flex; flex-wrap: wrap; gap: 0.5rem; } /* .tag { font-size: calc(0.95*var(--fs-credits)); padding: 0.5em 1em; border-radius: var(--br-s); } */ .tag.branding { background: var(--light-bg); } .tag.packaging { background: var(--light-bg); } .tag.marketing { background: var(--light-bg); } .image-wrapper { position: relative; } .card-bg { background: var(--white); border-radius: var(--br-s); } .slideshow-container { position: relative; width: 100%; height:clamp(21.875rem, 20.739rem + 7.68vw, 30rem); } .slide-img { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; transition: opacity 0.8s ease; } .slide-img.active { opacity: 1; z-index: 0; } .project-display-grid { margin-inline: auto; } #g-1.project-display-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } #g-2-1.project-display-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 1rem; } #g-3-1.project-display-grid.image-only { display: grid ; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; } .img-1 img { max-height: 90dvh; } .project-img-wrapper img { object-fit: cover; min-height: 100%; width: 100%; } #darkbg { padding: 0.2em 1em .15em 1em; width: fit-content; } .caption { position: relative; bottom: 3em; left: 1em; font-style: italic; font-size: var(--fs-credits); } @media (max-width: 55em) { #g-2-1.project-display-grid, #g-3-1.project-display-grid.image-only { grid-template-columns: 1fr; } } ul.brief-list li::before { content: ""; font-size: clamp(0.78rem, 0.7rem + 0.4vw, 1rem); /*margin-right: clamp(0.5rem, 0.341rem + 0.8vw, 0.938rem);*/ } ul.brief-list li { font-size: var(--fs-p); line-height: var(--lh-s); font-family: var(--ff-handwriting); text-transform: uppercase; color: var(--chocolate); } ul.brief-list { list-style: none; display: flex; flex-direction: column; gap: .8em; } #modal-list ul.brief-list { background: var(--white); padding: clamp(0.938rem, 0.597rem + 1.7vw, 1.875rem); border-radius: 8px; } #modal-list a { margin-top: clamp(1.25rem, 0.795rem + 2.27vw, 2.5rem); text-align: center; } .project-h2 { font-size: clamp(1.6rem, 1.236rem + 1.5vw, 3.3rem); } .project-end-button:hover { letter-spacing: 2px; } #dark.project-end-button:hover { color: var(--twhitebg); } .project-end-button { transition: all .5s; flex: 1; display: flex; align-items: center; justify-content: flex-end; color: var(--chocolate); @media (max-width: 60em) { margin-top: 50px; } } @media (max-width: 60em) { .not-found img { height: 325px; } } /*** SERVICES PAGE ***/ .services-grid { grid-column-gap: 2rem; grid-row-gap: 2rem; grid-template-rows: auto; grid-template-columns: 1fr; justify-content: flex-start; align-items: stretch; display: flex; height: 50svh; width: 120%; img { object-fit: cover; height:100%; border-radius: 4px; } @media (max-width: 70em) { height: 70svh; margin-left: -41rem; grid-column-gap: 1rem; grid-row-gap: 1rem; } @media (max-width: 60em) { height: 45svh; margin-left: 0rem; grid-column-gap: .6rem; grid-row-gap: .6rem; } } .services_gallery_image-col { grid-column-gap: 2rem; grid-row-gap: 2rem; flex-flow: column; flex: none; grid-template-rows: auto auto; grid-template-columns: 1fr; grid-auto-columns: 1fr; justify-content: space-between; display: flex; overflow: hidden; justify-content: center; } .service-items { display: flex; flex-flow: column; gap: 2rem; } #service.faq-question { line-height: var(--lh-s); font-size: var(--fs-h3); color: unset; font-weight: var(--fw-light); } #service.faq-question::after { color: var(--black); } #service.faq-answer { color: var(--twhitebg); padding-top: 20px; } .studio_card_grid-content { grid-column-gap: 1.5rem; grid-row-gap: 1.5rem; flex-flow: column; width: 100%; padding-top: 1rem; padding-left: 1rem; display: flex ; } .services_card_list { list-style-type: none; width: 100%; } .services_card_list.border-bottom { li { border-bottom: 1px solid #e3e3e3; } } .services_card_list-item { grid-column-gap: .75rem; grid-row-gap: 1.5rem; margin-bottom: 0; padding-top: .75rem; padding-bottom: .75rem; display: flex; align-items: center; } .fill { width: 100%; height: 100%; object-fit: cover; } .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); justify-items: center; align-content: stretch; gap: 2rem; max-width: 800px; margin-inline: auto; } .card.card-service { background: var(--lime); } .card-service { width: 100%; background: var(--lime); position: relative; border-radius: var(--br-s); padding: 1em; transition: all 0.4s ease; } .card-service .card-content { display: flex; flex-direction: column; justify-content: space-between; gap: 3em; height: 100%; transition: all 0.4s ease; } .card-service .card-top p, .card .card-top .card-title, .card .card-bottom p, .card .card-bottom .card-title { margin: 0; } .card-service .card-bottom { align-items: flex-end; } .card-service .card-image { position: absolute; width: 100%; height: 100%; top: 0; left: 0; display: grid; place-items: center; pointer-events: none; } .card-service .card-image svg { width: 4em; height: 4em; transition: all 0.4s ease; } .card-service:hover { cursor: pointer; transform: scale(0.97); background:#ddeb5fa3; } .card-service:hover .card-content { transform: scale(0.96); } .card-service:hover .card-image svg { transform: scale(1.05); } .card-service:active { transform: scale(0.9); } .circle { width: 30px; height: 30px; background-color: var(--black); border-radius: 50%; position: relative; animation: bounce 4s infinite; transform-origin: center bottom; } @keyframes bounce { 0% { left: 0; transform: scaleX(1) scaleY(1); } 20% { transform: scaleX(1.3) scaleY(0.7); /* squashes as it starts moving */ } 50% { left: 200px; transform: scaleX(1) scaleY(1); /* normal at the peak */ } 70% { transform: scaleX(1.3) scaleY(0.7); /* squashes as it hits the side */ } 100% { left: 0; transform: scaleX(1) scaleY(1); /* back to normal */ } } .outer-circle { width: 70px; height: 70px; border-radius: 50%; background-color: var(--black); position: relative; } .inner-circle { width: 20px; height: 20px; background-color: black; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(0deg) translateX(50px); transform-origin: center; animation: orbit 6s linear infinite; } @keyframes orbit { 0% { transform: translate(-50%, -50%) rotate(0deg) translateX(50px); } 100% { transform: translate(-50%, -50%) rotate(360deg) translateX(50px); } } .circle-container { position: relative; width: 50px; height: 50px; border-radius: 50%; } /* Base black circle */ .black-circle { width: 100%; height: 100%; background-color: var(--site-bg); border-radius: 50%; position: absolute; top: 0; left: 0; } /* Lime green circle morphing over */ .lime-circle { width: 100%; height: 100%; background-color: var(--black); border-radius: 50%; position: absolute; top: 0; left: 0; clip-path: inset(0 100% 0 0); /* Start hidden on the right */ animation: fill 5s infinite; } @keyframes fill { 0% { clip-path: inset(0 100% 0 0); } 50% { clip-path: inset(0 0 0 0); /* Fully visible */ } 100% { clip-path: inset(0 100% 0 0); } } .dots-container { display: flex; flex-direction: column; gap: 15px; align-items: center; } .dot { width: 20px; height: 20px; background-color: var(--black); border-radius: 50%; animation: heavyBounce 3s infinite ease-in-out; } .dot:nth-child(2) { animation-delay: 0.2s; } .dot:nth-child(3) { animation-delay: 0.4s; } @keyframes heavyBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-25px); } } .divider { padding-bottom: 50px; border-bottom: 1px solid #c0c0c0; margin-bottom: 60px; } .divider-only { margin-top: 45px; border-bottom: 1px solid #c0c0c082; margin-bottom: 20px; } /************** Pricing Tables *********/ /*hero page*/ .pricing-home { .pricing-card { background: var(--purple); color: var(--chocolate); .card-header { h3 { color: var(--chocolate); font-weight: var(--fw-bold); } p { color: var(--chocolate); font-size: var(--fs-p); font-style: normal; } } } .pricing-img { margin-top: -70px; margin-inline: auto; margin-bottom: 30px; } } /* General layout */ #pricing { background: #fff; padding-top: 5rem; color: #1f2937; /* gray-900 */ } #pricing.dark { background: #1f2937; /* gray-800 */ color: #e5e7eb; /* gray-200 */ } .pricing-header { max-width: 80rem; margin: 0 auto 2.5rem auto; padding: 0 1.5rem; text-align: center; } .pricing-header h2 { font-size: 1.125rem; font-weight: 600; color: #0d9488; /* teal-600 */ } #pricing.dark .pricing-header h2 { color: #2dd4bf; /* teal-400 */ } .pricing-header p { margin-top: 0.5rem; font-size: 2.25rem; font-weight: 700; letter-spacing: -0.02em; } /* Pricing cards grid */ .pricing-cards { margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 2rem; } @media (min-width: 1024px) { .pricing-cards { grid-template-columns: repeat(3, 1fr); } } #pricing.dark .card { background: #111827; /* gray-900 */ } .card-header { display: flex; flex-flow: column; justify-content: space-between; h3 { font-size: var(--fs-h4); text-transform: uppercase; } } .card-price { margin-top: 1rem; font-size: var(--fs-h2); font-weight: 600; display: flex; flex-flow: column; gap: 1rem; align-items: flex-end; color: white; } .card-price span { font-size: 1rem; color: var(--white); opacity: 0.9; } .card-desc { margin-top: 1rem; color: var(--white); font-size: 1rem; } #pricing.dark .card-desc { color: #d1d5db; } .card-body { margin-top: 2rem; background: var(--white); border-radius: 1rem; padding: .85rem 1.55rem; } #icon-filled { min-width: 10px; min-height: 10px; max-width: 12px; max-height: 12px; } #pricing.dark .card-body { background: #374151; /* gray-700 */ } .card-body ul { list-style: none; padding: 0; } .card-body li { font-size: calc(0.9*var(--fs-p)); display: flex; align-items: center; } #pricing.dark .card-body li { color: #d1d5db; } .discount-badge { background: var(--lime); color: black; font-size: var(--fs-credits); font-weight: 500; border-radius: 9999px; padding: 0.25rem 0.75rem; width: fit-content; height: fit-content; margin-block: auto; } .lighten-darkbg { color: var(--site-bg); opacity: 0.9; } .card-auto-grids { display: grid; gap: 3rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin: 0 auto; } .pricing-card { background: #ffffff21; padding: 2rem; border-radius: 1rem; box-shadow: 0 4px 12px rgba(0,0,0,0.02); text-align: left; transition: transform 0.2s ease; text-align: center; .card-header h3 { color: white; } p { color: var(--white); opacity: 0.9; } } .branding-card { background: #ffffff21; padding: 2rem; border-radius: 1rem; box-shadow: 0 4px 12px rgba(0,0,0,0.08); text-align: left; transition: all 0.2s ease; opacity: 0.9; .card-header { h3 { color: white; } p { color: var(--white); opacity: 0.9; } } } .branding-card:hover { opacity: 1; } .pricing-card:hover { transform: translateY(-5px); } .pricing-card ul { list-style: none; padding: 0; margin: 0; } .pricing-card ul li { margin-bottom: 0.75rem; color: #333; position: relative; padding-left: 1.25rem; } .pricing-card ul li::before { content: "✔"; position: absolute; left: 0; } .grid .services .table { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); text-wrap: nowrap; } .item-0 { grid-column: 1 / span 2; grid-row: 1; } .item-1 { grid-column: 1 / span 2; grid-row: 2; } .item-2 { grid-column: 1 / span 2; grid-row: 3; } @media (min-width: 65em) { .item-0 { grid-column: 1 / span 2; grid-row: 1; } .item-1 { grid-column: 3 / span 2; grid-row: 1; } .item-2 { grid-column: 1 / span 3; grid-row: 2 / span 2; } .item-3 { grid-column: 4 / span 1; grid-row: 2 / span 2; } .item-4 { grid-column: 4 / span 1; grid-row: 3 / span 1; } } /* Main container */ .expanding-grid { display: flex; gap: 1rem; width: 100%; height: 60dvh; } /* Each card */ .expanding-card { flex: 1; /* all cards equal by default */ background: white; border-radius: var(--br-s); overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; align-items: left; cursor: pointer; transition: flex-grow 0.5s cubic-bezier(0.4, 0, 1, 1), transform 0.3s ease-out; position: relative; } .expanding-card h3 { border-radius: var(--br-l); font-weight: var(--fw-medium); text-align: left; margin: clamp(0.75rem, 1.159rem + .85vw, 1.5rem); padding: 10px 25px; font-size: calc(1.5 * var(--fs-h3)); line-height: var(--lh-xs); width: fit-content; } #expanding-card-1.expanding-card { background-image: url(../assets/jtbrandboard.png); height: 100%; background-position: center top; background-size: cover; } #expanding-card-2.expanding-card { background-image: url(../assets/ecc/theecc-laptopmockup.jpg); height: 100%; background-position: center top; background-size: cover; } #expanding-card-3.expanding-card { background-image: url('/wp-content/themes/astra-child/assets/era/HOCL_8oz_Mockup_REV4.png'); height: 100%; background-position: center top; background-size: cover; } #expanding-card-4.expanding-card { background-image: url('/wp-content/themes/astra-child/assets/FluxRedWine_V4.png'); height: 100%; background-position: center top; background-size: cover; } /* Smooth horizontal expansion on hover */ .expanding-card:hover { flex-grow: 3; } .expanding-subgrid { max-height: 0; opacity: 0; overflow: hidden; transition-property: max-height, opacity; transition-duration: 0.2s, 0.3s; transition-timing-function: ease, cubic-bezier(0, 0.84, 0.78, 1); transition-delay: 0s, .7s; } .expanding-card:hover .expanding-subgrid { max-height: 500px; /* pick a value that fits your content */ opacity: 1; } .subgrid-item { border-radius: var(--br-s); display: flex; justify-content: center; align-items: flex-end; margin: 20px; text-align: left; padding: 30px 25px; } .subgrid-item svg { margin: auto 10px auto auto; height: 40px; flex: 100px; } .subgrid-item.item-1 { background: var(--milk); backdrop-filter: blur(10px); } .expand-toggle { display: none; } /* Mobile version */ @media (max-width: 768px) { .expand-toggle { display: block; } .expanding-grid { flex-direction: column; height: auto; } .expanding-card { flex: none; width: 100%; height: auto; transform: none; transition: 1s ease; /* disable hover animations on mobile */ min-height: 60dvh; } .expanding-card:hover { flex-grow: unset; transform: none; min-height: 60dvh; } .expanding-subgrid { opacity: 1; max-height: unset; } .expanding-card.expanded .expanding-subgrid { display: grid; } } @media (min-width: 768px) and (max-width: 1080px) { .expanding-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; } } @media (min-width: 1080px) { .expanding-card { min-height: 400px; } } /** Anisha Project Page **/ .learn-item { display: flex; flex-direction: column; gap: 10px; } .learn-item h3 { font-size: var(--fs-h4); font-weight: var(--fw-semibold); }