/* ╔══════════════════════════════════════════════════════════════════╗ ║ INFLUENCER SITE TEMPLATE — STYLESHEET ║ ║ built by 658 Designz ║ ║ ║ ║ You almost never need to scroll past the BRAND CONFIG block ║ ║ below. Changing those few values rebrands the entire site. ║ ╚══════════════════════════════════════════════════════════════════╝ */ /* ══════════════════════════════════════════════════════════════════ EDIT · BRAND CONFIG ← the only block most clients need ══════════════════════════════════════════════════════════════════ COLOURS Change a value here and it updates everywhere on the page. Use any hex code. Keep dark colours dark and light ones light, or the text will stop being readable. THE ACCENT is the one colour that carries the brand — buttons, underlines, hover states, the corner marks. Pick it from the client's own photos or logo. Good starting points: Brass #D9A441 (default — warm, premium, suits most) Coral #E2674A (energetic, food & lifestyle) Teal #3FA89B (fresh, wellness & fitness) Rose #D4708A (beauty & fashion) Violet #8B6FD4 (music & entertainment) ══════════════════════════════════════════════════════════════════ */ :root { /* ---- Colours ---------------------------------------------------- */ --ground: #0E0F12; /* page background */ --surface: #16181D; /* cards, panels, image backdrops */ --surface-2: #1D2027; /* hover state for cards */ --ink: #F2EFE9; /* main text */ --ink-muted: #9A9CA4; /* secondary text, captions */ --line: #2A2D35; /* hairline borders and dividers */ --accent: #D9A441; /* THE BRAND COLOUR — buttons, highlights */ --on-accent: #0E0F12; /* text sitting ON TOP of the accent */ /* ---- Fonts ------------------------------------------------------ */ /* To change a typeface you must ALSO update the Google Fonts in the of index.html, or the new font won't load. */ --font-display: "Bodoni Moda", Georgia, "Times New Roman", serif; --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; /* ---- Sizing ----------------------------------------------------- */ --max-width: 1240px; /* how wide the content gets on big screens */ --gutter: clamp(1.25rem, 5vw, 4rem); /* side page padding */ --section-pad: clamp(4.5rem, 11vw, 9rem); /* space between sections*/ --radius: 2px; /* corner rounding. 0 = sharp, 12px = soft */ } /* ══════════════════════════════════════════════════════════════════ OPTIONAL · LIGHT VERSION OF THE SITE Some clients will want a light site instead of a dark one. To switch: delete the two comment-marker lines directly below — the one just above ":root {" and the one just below its closing brace. That's it. Nothing else on the page needs to change. (To go back to dark, put those two lines back.) ══════════════════════════════════════════════════════════════════ */ /* ---- delete this line to turn the light version ON ---------------- :root { --ground: #F7F7F5; --surface: #FFFFFF; --surface-2: #EFEFEC; --ink: #14161A; --ink-muted: #5D6068; --line: #DEDEDA; --accent: #A8791F; --on-accent: #FFFFFF; } ---- and delete this line too ----------------------------------- */ /* ══════════════════════════════════════════════════════════════════ Everything below is the machinery. You can safely ignore it. ══════════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 90px; } body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--font-body); font-size: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem); line-height: 1.7; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; } h1, h2, h3 { margin: 0; text-wrap: balance; } p { margin: 0; } ul { margin: 0; padding: 0; list-style: none; } .sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--accent); color: var(--on-accent); padding: 0.75rem 1.25rem; font-weight: 600; } .skip-link:focus { left: 0; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* ---- Layout helpers ------------------------------------------------ */ .shell { width: 100%; max-width: var(--max-width); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--section-pad); } .section__head { max-width: 46ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); } .section__lede { color: var(--ink-muted); margin-top: 1rem; } /* ---- Typography ---------------------------------------------------- */ .label { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); margin-bottom: 1.25rem; } .h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem); line-height: 1.08; letter-spacing: -0.015em; } .pullquote { font-family: var(--font-display); font-style: italic; font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.6rem); line-height: 1.45; margin: 2.25rem 0 0; padding-left: 1.5rem; border-left: 2px solid var(--accent); color: var(--ink); } /* ---- Buttons ------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.9rem 1.6rem; border-radius: var(--radius); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background-color .25s, color .25s, border-color .25s, transform .25s; } .btn svg { width: 1.05em; height: 1.05em; display: block; } .btn--solid { background: var(--accent); color: var(--on-accent); } .btn--solid:hover { transform: translateY(-2px); background: var(--ink); color: var(--ground); } .btn--ghost { border-color: var(--line); color: var(--ink); } .btn--ghost:hover { border-color: var(--accent); color: var(--accent); } /* ---- Social icons -------------------------------------------------- */ .socials { display: flex; gap: 0.75rem; } .socials a { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink-muted); transition: color .25s, border-color .25s, background-color .25s; } .socials svg { width: 19px; height: 19px; display: block; } .socials a:hover { color: var(--accent); border-color: var(--accent); background: var(--surface); } .socials--lg { justify-content: center; } .socials--lg a { width: 52px; height: 52px; } .socials--lg svg { width: 22px; height: 22px; } /* ---- Navigation ---------------------------------------------------- */ .nav { position: fixed; inset: 0 0 auto 0; z-index: 100; background: transparent; border-bottom: 1px solid transparent; transition: background-color .3s, border-color .3s, backdrop-filter .3s; } .nav.is-scrolled { background: color-mix(in srgb, var(--ground) 88%, transparent); backdrop-filter: blur(14px); border-bottom-color: var(--line); } .nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: 78px; } .nav__logo { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; letter-spacing: 0.01em; text-decoration: none; white-space: nowrap; } .nav__menu { display: flex; align-items: center; gap: 2.25rem; } .nav__menu ul { display: flex; gap: 2rem; } /* scoped to the list so it can't override the CTA button's colours */ .nav__menu ul a { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; color: var(--ink-muted); transition: color .2s; } .nav__menu ul a:hover, .nav__menu ul a.is-active { color: var(--ink); } .nav__cta { padding: 0.7rem 1.25rem; } .nav__toggle { display: none; width: 44px; height: 44px; background: none; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; padding: 0 11px; } .nav__toggle span { display: block; height: 1.5px; background: var(--ink); margin: 5px 0; transition: transform .3s, opacity .3s; } .nav__toggle[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); } .nav__toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.25px) rotate(-45deg); } /* ---- Hero ---------------------------------------------------------- */ .hero { padding-top: clamp(7rem, 14vw, 10rem); padding-bottom: clamp(3rem, 7vw, 5rem); } .hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; } .hero__name { font-family: var(--font-display); font-weight: 500; font-size: clamp(3.25rem, 1.5rem + 8.5vw, 7.5rem); line-height: 0.92; letter-spacing: -0.03em; margin-bottom: 1.5rem; } .hero__name em { font-style: italic; color: var(--accent); } .hero__roles { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); padding-bottom: 1.75rem; border-bottom: 1px solid var(--line); } .hero__intro { max-width: 46ch; color: var(--ink-muted); margin-top: 1.75rem; } .hero__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin: 2.25rem 0; } .hero__figure { position: relative; margin: 0; } .hero__figure img { position: relative; z-index: 1; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius); } /* thin accent frame offset behind the portrait */ .hero__figure::after { content: ""; position: absolute; inset: 1.5rem -1.5rem -1.5rem 1.5rem; border: 1px solid var(--accent); border-radius: var(--radius); z-index: 0; pointer-events: none; } /* ---- Stats strip --------------------------------------------------- */ .stats { border-block: 1px solid var(--line); } .stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); } .stat { padding: clamp(1.75rem, 3.5vw, 2.75rem) clamp(0.5rem, 2vw, 1.5rem); border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 0.35rem; } .stat:first-child { border-left: 0; padding-left: 0; } .stat__num { font-family: var(--font-display); font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.9rem); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; } .stat__cap { font-size: 0.75rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-muted); line-height: 1.5; } /* ---- Story --------------------------------------------------------- */ .story__grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; } .story__figure { margin: 0; position: sticky; top: 110px; } .story__figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); } .story__text p + p { margin-top: 1.25rem; } .story__text > p:not(.label) { color: var(--ink-muted); } .story__text .h2 { margin-bottom: 1.75rem; } .story__text .pullquote { color: var(--ink); } /* ---- Content pillars ----------------------------------------------- */ .cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.25rem, 2.5vw, 2rem); } .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: background-color .3s, border-color .3s, transform .3s; } .card:hover { background: var(--surface-2); border-color: var(--accent); transform: translateY(-4px); } .card__img { overflow: hidden; } .card__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .5s; } .card:hover .card__img img { transform: scale(1.05); } .card__title { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; padding: 1.5rem 1.5rem 0.6rem; } .card p { padding: 0 1.5rem 1.75rem; color: var(--ink-muted); font-size: 0.9375rem; } /* ---- Values -------------------------------------------------------- */ .values { background: var(--surface); border-block: 1px solid var(--line); } .values__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.75rem, 3.5vw, 3rem); } .value { padding-top: 1.5rem; border-top: 2px solid var(--accent); } .value__title { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; margin-bottom: 0.65rem; } .value p { color: var(--ink-muted); font-size: 0.9375rem; } /* ---- Partner logos ------------------------------------------------- */ .logos { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: clamp(3rem, 6vw, 4.5rem); } .logos li { background: var(--ground); display: grid; place-items: center; padding: 1.75rem 1.25rem; } .logos img { max-height: 46px; width: auto; opacity: 0.55; filter: grayscale(1); transition: opacity .3s, filter .3s; } .logos li:hover img { opacity: 1; filter: grayscale(0); } /* ---- Testimonials -------------------------------------------------- */ .quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 2.5vw, 2rem); } .quote { margin: 0; padding: clamp(1.75rem, 3vw, 2.25rem); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; gap: 1.75rem; transition: border-color .3s; } .quote:hover { border-color: var(--accent); } .quote blockquote { margin: 0; flex: 1; font-family: var(--font-display); font-style: italic; font-size: 1.1rem; line-height: 1.5; } .quote figcaption { display: flex; align-items: center; gap: 0.9rem; } .quote figcaption img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .quote figcaption span { display: flex; flex-direction: column; font-size: 0.8125rem; line-height: 1.45; color: var(--ink-muted); } .quote figcaption strong { color: var(--ink); font-weight: 600; } /* ---- Collaboration clips ------------------------------------------- */ .clipgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 2.5vw, 2rem); } .clip { text-decoration: none; display: block; } .clip__img { position: relative; display: block; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); transition: border-color .3s; } .clip__img img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .5s, opacity .3s; } .clip:hover .clip__img { border-color: var(--accent); } .clip:hover .clip__img img { transform: scale(1.05); opacity: 0.75; } .clip__play { position: absolute; inset: 0; display: grid; place-items: center; } .clip__play svg { position: relative; width: 22px; height: 22px; color: var(--on-accent); margin-left: 3px; } .clip__play::before { content: ""; position: absolute; width: 58px; height: 58px; border-radius: 50%; background: var(--accent); transition: transform .3s; } .clip:hover .clip__play::before { transform: scale(1.12); } .clip__meta { display: flex; flex-direction: column; margin-top: 1rem; font-size: 0.8125rem; letter-spacing: 0.05em; color: var(--ink-muted); } .clip__meta strong { color: var(--ink); font-size: 1rem; font-weight: 600; letter-spacing: 0; margin-bottom: 0.15rem; } /* ---- Contact ------------------------------------------------------- */ .contact { border-top: 1px solid var(--line); text-align: center; } .contact__inner { display: flex; flex-direction: column; align-items: center; } .contact .label { margin-bottom: 1.5rem; } .contact__head { font-family: var(--font-display); font-weight: 500; font-size: clamp(2.4rem, 1.4rem + 4.4vw, 5rem); line-height: 1.02; letter-spacing: -0.025em; } .contact__head em { font-style: italic; color: var(--accent); } .contact__lede { max-width: 52ch; color: var(--ink-muted); margin-top: 1.75rem; } .contact__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin: 2.75rem 0 2.25rem; } .contact__link { display: inline-flex; align-items: center; gap: 0.7rem; padding: 1rem 1.75rem; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; font-size: 0.9375rem; font-weight: 600; transition: border-color .25s, color .25s, background-color .25s; } .contact__link svg { width: 19px; height: 19px; color: var(--accent); flex-shrink: 0; } .contact__link:hover { border-color: var(--accent); background: var(--surface); } /* ---- Optional contact form ----------------------------------------- */ .cform { width: 100%; max-width: 620px; text-align: left; margin-top: 1rem; } .cform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .cform__field { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; } .cform__field > span { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-muted); } .cform input, .cform textarea { width: 100%; padding: 0.9rem 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); font-family: inherit; font-size: 1rem; resize: vertical; } .cform input:focus, .cform textarea:focus { outline: none; border-color: var(--accent); } .cform button { margin-top: 0.5rem; } /* ---- Footer -------------------------------------------------------- */ .footer { border-top: 1px solid var(--line); padding-block: 2.25rem; } .footer__inner { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; justify-content: space-between; font-size: 0.8125rem; color: var(--ink-muted); } .footer a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--accent); } .footer a:hover { color: var(--accent); } /* ---- Scroll reveal animation --------------------------------------- */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; } .reveal.is-visible { opacity: 1; transform: none; } /* ══════════════════════════════════════════════════════════════════ RESPONSIVE — tablet and phone layouts ══════════════════════════════════════════════════════════════════ */ @media (max-width: 1000px) { .cards, .values__grid { grid-template-columns: repeat(2, 1fr); } .clipgrid, .quotes { grid-template-columns: repeat(2, 1fr); } .logos { grid-template-columns: repeat(3, 1fr); } .story__grid { grid-template-columns: 1fr; } .story__figure { position: static; max-width: 460px; } } @media (max-width: 860px) { html { scroll-padding-top: 80px; } /* stack the hero, photo below the text */ .hero__grid { grid-template-columns: 1fr; } .hero__figure { max-width: 460px; margin-inline: auto; } .hero__figure::after { inset: 1rem -1rem -1rem 1rem; } .stats__grid { grid-template-columns: repeat(2, 1fr); } .stat { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); } .stat:nth-child(-n+2) { border-top: 0; } /* mobile menu overlay */ .nav__toggle { display: block; } .nav__menu { position: fixed; inset: 78px 0 0 0; flex-direction: column; justify-content: center; gap: 2.5rem; background: var(--ground); /* hidden with opacity rather than sliding off-screen — a fixed element parked outside the viewport creates a sideways scroll */ opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-10px); transition: opacity .3s ease, transform .3s ease, visibility .3s; } .nav__menu.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: none; } .nav__menu ul { flex-direction: column; text-align: center; gap: 1.75rem; } .nav__menu ul a { font-size: 1rem; } .nav.is-scrolled { background: var(--ground); } } @media (max-width: 620px) { .cards, .values__grid, .clipgrid, .quotes { grid-template-columns: 1fr; } .logos { grid-template-columns: repeat(2, 1fr); } .cform__row { grid-template-columns: 1fr; } .contact__links { flex-direction: column; width: 100%; } .contact__link { justify-content: center; } .footer__inner { justify-content: center; text-align: center; } } /* ---- Respect reduced-motion preferences ---------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; transition: none; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }