/*
Theme Name: Mayara Sousa
Theme URI: https://www.mayarasousa.com/
Author: Mayara Sousa
Author URI: https://www.mayarasousa.com/
Description: Portfolio and engagement site for Mayara Sousa. Brand, interface and build. Hand-written, no framework, no build step. Key values (links, palette, photos, videos, location, Resend) live under Appearance > Site Settings.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mayara
*/
/* ==========================================================================
Mayara Sousa — prototype
1. Fonts
2. Tokens
3. Base + reset
4. Typography
5. Components
6. Header / nav
7. Hero
8. Marquee
9. About
10. Services
11. Work
12. Working together
13. The other half + contact
14. Footer
15. Work with me (work-with-me.html)
16. About (about.html)
16b. Legal (privacy.html)
17. Motion / reveal
18. Responsive
========================================================================== */
/* ═══ 1. Fonts ═══ */
@font-face {
font-family: "RL Madena";
src: url("assets/fonts/rl-madena.woff") format("woff");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "RL Madena";
src: url("assets/fonts/rl-madena-oblique.woff") format("woff");
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Public Sans";
src: url("assets/fonts/PublicSans-Variable.woff2") format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Public Sans";
src: url("assets/fonts/PublicSans-VariableItalic.woff2") format("woff2");
font-weight: 100 900;
font-style: italic;
font-display: swap;
}
/* ═══ 2. Tokens ═══ */
:root {
/* color */
--blue: #0019be;
--pink: #f486a6;
--pink-pale: #f4d6d6;
--cream: #f8f5f2;
--ink: #222;
--white: #fff;
--line: rgba(34, 34, 34, .16);
/* Full-strength, on purpose. Two jobs: the hard boundary between major
sections, AND the rules between rows inside a list section (services, fit,
arc, steps, story blocks). Home always used it for both; the other pages
had drifted to the 16% --line for their rows, which read as a different
design. If you add a new list section, its row rule is --rule. */
--rule: var(--ink);
--line-strong: rgba(34, 34, 34, .38);
--line-light: rgba(255, 255, 255, .3);
/* type */
--font-display: "RL Madena", "Times New Roman", serif;
--font-body: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-mono: "input-mono-condensed", ui-monospace, "SFMono-Regular", Menlo, monospace;
--track-body: -.012em; /* slight negative tracking — reads more modern */
--track-label: .16em;
/* scale */
--step-hero: clamp(3rem, 8.6vw, 8.75rem);
--step-h2: clamp(2.1rem, 4.6vw, 4.1rem);
--step-h3: clamp(1.5rem, 2.4vw, 2.1rem);
--step-lead: clamp(1.0625rem, 1.25vw, 1.3125rem);
--step-body: clamp(.95rem, 1.02vw, 1.0625rem);
--step-fine: .8125rem; /* fine print — consent lines, form small text */
--step-label: .69rem;
/* space */
--gutter: clamp(1.25rem, 4.4vw, 4.5rem);
--shell: 1560px;
--section-y: clamp(5.5rem, 12vh, 11rem);
--header-h: 78px;
--bar-h: 2.5rem;
--ease: cubic-bezier(.2, .7, .2, 1);
}
/* ═══ 3. Base ═══ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
margin: 0;
background: var(--cream);
color: var(--ink);
font-family: var(--font-body);
font-size: var(--step-body);
font-weight: 400;
line-height: 1.62;
letter-spacing: var(--track-body);
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
/* paper grain — like the references, very subtle */
body::after {
content: "";
position: fixed;
inset: 0;
z-index: 999;
pointer-events: none;
opacity: .05;
mix-blend-mode: multiply;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* height:auto is not optional now that every ![]()
carries width/height
attributes: without it the height attribute acts as a presentational
height and any image whose CSS sets only a width renders squashed. */
img { max-width: 100%; height: auto; display: block; }
svg { display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
blockquote { margin: 0; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--blue); color: var(--cream); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.shell {
width: 100%;
max-width: var(--shell);
margin-inline: auto;
padding-inline: var(--gutter);
}
.section { padding-block: var(--section-y); }
.skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 1000;
background: var(--blue);
color: var(--cream);
padding: .75rem 1.25rem;
}
.skip-link:focus { left: 0; }
:focus-visible {
outline: 1.5px solid var(--blue);
outline-offset: 3px;
}
/* ═══ 4. Typography ═══ */
.h2, .hero__title, .service__name {
font-family: var(--font-display);
font-weight: 400;
letter-spacing: -.015em;
}
.h2 {
font-size: var(--step-h2);
line-height: 1.02;
margin: 0 0 1.1rem;
max-width: 16ch;
}
.h2 em, .hero__title em { font-style: italic; }
.lead {
font-size: var(--step-lead);
line-height: 1.55;
max-width: 46ch;
}
p { margin: 0 0 1.1em; max-width: 60ch; }
p:last-child { margin-bottom: 0; }
.eyebrow {
display: block; /* block, not flex — long labels must wrap */
margin: 0 0 1.4rem;
max-width: none; /* opt out of the 60ch cap on */
font-size: var(--step-label);
font-weight: 500;
letter-spacing: var(--track-label);
text-transform: uppercase;
line-height: 1;
}
.mark { width: 1em; height: 1em; fill: currentColor; flex: none; }
.eyebrow .mark { display: inline-block; vertical-align: -.08em; margin-inline: .2em; }
.mark--sm { width: .8em; height: .8em; }
.mark--lg { width: 2.4rem; height: 2.4rem; }
.section__head { margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.section__head--split {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 2rem;
flex-wrap: wrap;
}
/* ═══ 5. Components ═══ */
.btn {
--btn-fg: var(--ink);
--btn-bg: transparent;
--btn-bd: var(--line-strong);
display: inline-flex;
align-items: center;
gap: .55rem;
padding: .95rem 1.6rem;
border: 1px solid var(--btn-bd);
border-radius: 0; /* never rounded */
background: var(--btn-bg);
color: var(--btn-fg);
font-size: var(--step-label);
font-weight: 500;
letter-spacing: var(--track-label);
text-transform: uppercase;
line-height: 1;
cursor: pointer;
/* fill that rises on hover — no shadow, contrast only */
background-image: linear-gradient(var(--btn-fill, var(--ink)), var(--btn-fill, var(--ink)));
background-repeat: no-repeat;
background-position: 50% 100%;
background-size: 100% 0%;
transition: background-size .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease);
}
.btn:hover { background-size: 100% 100%; }
.btn--solid { --btn-fg: var(--cream); --btn-bg: var(--blue); --btn-bd: var(--blue); --btn-fill: var(--ink); }
.btn--ghost { --btn-fill: var(--blue); }
.btn--ghost:hover { color: var(--cream); border-color: var(--blue); }
.btn--invert { --btn-fg: var(--blue); --btn-bg: var(--cream); --btn-bd: var(--cream); --btn-fill: var(--pink); }
.btn--invert:hover { color: var(--ink); }
.btn--outline-light { --btn-fg: var(--cream); --btn-bd: var(--line-light); --btn-fill: var(--cream); }
.btn--outline-light:hover { color: var(--blue); border-color: var(--cream); }
.link-arrow {
display: inline-flex;
align-items: center;
gap: .6rem;
font-size: var(--step-label);
font-weight: 500;
letter-spacing: var(--track-label);
text-transform: uppercase;
padding-bottom: .45rem;
border-bottom: 1px solid var(--line-strong);
transition: color .3s var(--ease), border-color .3s var(--ease);
}
.link-arrow .mark { transition: transform .35s var(--ease); }
.link-arrow:hover { color: var(--blue); border-color: var(--blue); }
.link-arrow:hover .mark { transform: translateX(5px); }
/* blurred blobs — the blur the brand is built on */
.blob {
position: absolute;
display: block;
pointer-events: none;
filter: blur(90px);
will-change: transform;
}
.blob--blue {
width: 46vw; height: 46vw;
top: -12vw; right: -6vw;
background: var(--blue);
opacity: .22;
border-radius: 62% 38% 46% 54% / 55% 40% 60% 45%;
}
.blob--pink {
width: 38vw; height: 34vw;
bottom: -10vw; left: -8vw;
background: var(--pink);
opacity: .48;
border-radius: 44% 56% 63% 37% / 48% 62% 38% 52%;
}
.blob--pale {
width: 30vw; height: 30vw;
top: 42%; left: 46%;
background: var(--pink-pale);
opacity: .7;
border-radius: 58% 42% 38% 62% / 42% 55% 45% 58%;
}
/* --- 3D objects scattered across the page ---
They sit in front and cross section boundaries, which is the whole point, but
pointer-events:none means they can never swallow a click. Cream and pale-pink
backgrounds only: the white enclosed inside the blue doodles is not connected
to the image border, so the cutout keeps it — invisible on cream, obvious on blue. */
.deco {
position: absolute;
z-index: 2;
width: clamp(130px, 15vw, 250px);
height: auto;
pointer-events: none;
user-select: none;
}
.services, .about, .work, .other, .together, .contact { position: relative; }
/* floats like the laptop, but smaller drift and a slower, offset cycle so the
two are never bobbing in step. See @keyframes float. */
.deco--coffee {
right: 5%;
top: -13%;
width: clamp(140px, 15vw, 250px);
transform: rotate(-8deg);
--float-from: -8deg;
--float-to: -4deg;
--float-y: -16px;
animation: float 8.5s ease-in-out infinite -2.5s;
}
/* these two hang off the portrait itself — sized in % so they scale with it */
.deco--eiffel { top: -15%; right: -13%; width: 46%; transform: rotate(6deg); z-index: 5; }
.deco--cat { bottom: -15%; left: -9%; width: 50%; transform: rotate(-5deg); z-index: 5; }
/* --- hand-drawn emphasis marks --- */
.scribble {
position: relative;
display: inline-block;
white-space: nowrap; /* the mark is one box, so the phrase must not wrap */
}
.doodle {
position: absolute;
left: 50%;
pointer-events: none;
overflow: visible;
fill: none;
stroke: var(--blue);
stroke-width: 2;
stroke-linecap: round;
}
.scribble--circle { margin-inline: .22em; } /* room for the loop to clear its neighbours */
.doodle--line { bottom: -.42em; width: 104%; height: .48em; transform: translateX(-50%); }
.doodle--circle { top: 50%; width: 142%; height: 2.1em; transform: translate(-50%, -50%); }
/* drawn in when the paragraph reveals. stroke-dashoffset is an inherited SVG
property, so setting it here reaches the path inside