/* =============================================================
ElmsPark Theme — PageMotor conversion
British English. Light + dark via [data-theme="dark"] on .
============================================================= */
/* ------------------------------------------------------------
1. CSS Custom Properties (Bridge)
------------------------------------------------------------ */
:root {
--font1: 'Inter Tight', sans-serif;
--font2: 'Fraunces', serif;
--font3: 'Bricolage Grotesque', sans-serif;
--f1: 45px;
--f2: 35px;
--f3: 28px;
--f4: 22px;
--f5: 17px;
--f6: 13px;
--g1: 71px;
--g2: 56px;
--g3: 46px;
--g4: 37px;
--g5: 30px;
--g6: 24px;
--x1: 49px;
--x2: 30px;
--x3: 19px;
--x4: 12px;
--x5: 7px;
--x6: 4px;
--phi: 1.618;
--w-content: 672px;
--w-total: 1280px;
--gutter-full: 40px;
--gutter-mobile: 24px;
--bg1: #F4EFE6;
--bg2: #EBE4D5;
--c1: #1A1714;
--c2: #3D3630;
--ca: #B8441F;
--c-muted: #7A6F63;
--c-rule: #1A1714;
--bg-suite: #1A1714;
--c-suite: #F4EFE6;
--ca-suite: #D67355;
--rule-suite: rgba(244,239,230,0.2);
--select-chevron: url("data:image/svg+xml;utf8,");
/* Extended design tokens (injected) */
--b-callout: rgba(26, 23, 20, 0.08);
--b-footer: rgba(244, 239, 230, 0.12);
--b-header: rgba(26, 23, 20, 0.08);
--b-input: 1px solid rgba(26, 23, 20, 0.2);
--b-select: 1px solid rgba(26, 23, 20, 0.2);
--b2: rgba(26, 23, 20, 0.2);
--b3: rgba(26, 23, 20, 0.15);
--bg-blockquote: transparent;
--bg-button: #1A1714;
--bg-button-delete: #7A2418;
--bg-button-save: #B8441F;
--bg-button-update: #B8441F;
--bg-callout: rgba(26, 23, 20, 0.04);
--bg-callout-alert: rgba(184, 68, 31, 0.08);
--bg-callout-note: rgba(26, 23, 20, 0.04);
--bg-content: #F4EFE6;
--bg-footer: #1A1714;
--bg-header: #F4EFE6;
--bg-highlight: rgba(184, 68, 31, 0.15);
--bg-pre: rgba(26, 23, 20, 0.06);
--bg-suite: #1A1714;
--bg1: #F4EFE6;
--bg2: #EBE4D5;
--border1: 1px solid #1A1714;
--border2: 1px solid rgba(26, 23, 20, 0.2);
--border3: 1px dashed rgba(26, 23, 20, 0.15);
--c-blockquote: #1A1714;
--c-button: #F4EFE6;
--c-button-delete: #F4EFE6;
--c-button-save: #F4EFE6;
--c-button-update: #F4EFE6;
--c-byline: #7A6F63;
--c-callout: #1A1714;
--c-callout-alert: #B8441F;
--c-callout-note: #7A6F63;
--c-caption: #7A6F63;
--c-content: #1A1714;
--c-drop-cap: #B8441F;
--c-footer: #F4EFE6;
--c-header: #1A1714;
--c-impact: #B8441F;
--c-muted: #7A6F63;
--c-pre: #1A1714;
--c-required: #B8441F;
--c-rule: #1A1714;
--c-suite: #F4EFE6;
--c1: #1A1714;
--c2: #3D3630;
--ca: #B8441F;
--ca-suite: #D67355;
--f-blockquote: var(--f3);
--f-byline: var(--f6);
--f-footer: var(--f6);
--f1: 45px;
--f2: 35px;
--f3: 28px;
--f4: 22px;
--f5: 17px;
--f5c: 17px/1.5;
--f6: 13px;
--f6c: 13px/1.5;
--font-blockquote: font2;
--font-byline: font1;
--font-caption: font1;
--font-code: "JetBrains Mono", Menlo, Consolas, monospace;
--font-drop-cap: font2;
--font-footer: font1;
--font-heading: font2;
--font-headline: font2;
--font-impact: font3;
--font-label: font1;
--font-size: 17px;
--font1: 'Inter Tight', sans-serif;
--font2: 'Fraunces', serif;
--font3: 'Bricolage Grotesque', sans-serif;
--g-blockquote: var(--g2);
--g-byline: var(--g6);
--g-footer: var(--g5);
--g1: 71px;
--g2: 56px;
--g3: 46px;
--g4: 37px;
--g5: 30px;
--g6: 24px;
--google-fonts: family=Inter+Tight:wght@400;500;600&family=Fraunces:ital,wght@0,300;0,400;1,300;1,400&family=Bricolage+Grotesque:wght@400;500;700&display=swap;
--gutter-full: var(--x2);
--gutter-mobile: var(--x3);
--list-item-margin: var(--x5);
--list-margin: var(--x3);
--list-nested-margin: var(--x3);
--list-style: disc;
--m-caption: var(--x4);
--m-caption-h2-m: var(--x3);
--m-caption-h3: var(--x4);
--m-caption-h3-m: var(--x5);
--p-button-x: var(--x2);
--p-button-y: var(--x4);
--p-callout: var(--x3);
--p-content-bottom: var(--x2);
--p-content-top: var(--x2);
--p-footer-bottom: var(--x3);
--p-footer-top: var(--x2);
--p-header-bottom: var(--x3);
--p-header-top: var(--x3);
--p-input: var(--x4);
--phi: 1.618;
--rule-suite: rgba(244, 239, 230, 0.2);
--style-drop-cap: italic;
--style-headline: normal;
--style-impact: normal;
--style-label: normal;
--w-content: 672px;
--w-total: 1280px;
--x1: 49px;
--x2: 30px;
--x3: 19px;
--x4: 12px;
--x5: 7px;
--x6: 4px;
}
[data-theme="dark"] {
--bg1: #1A1714;
--bg2: #262220;
--c1: #F4EFE6;
--c2: #C4BCB0;
--ca: #D67355;
--c-muted: #8A8077;
--c-rule: #3D3630;
--bg-suite: #0F0D0B;
--c-suite: #F4EFE6;
--ca-suite: #E8866A;
--rule-suite: rgba(244,239,230,0.12);
--select-chevron: url("data:image/svg+xml;utf8,");
}
/* ------------------------------------------------------------
2. Reset
------------------------------------------------------------ */
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
}
table {
border-collapse: collapse;
border-spacing: 0;
word-break: normal;
}
img, fieldset {
border: 0;
}
abbr {
text-decoration: none;
}
img {
max-width: 100%;
height: auto;
display: block;
}
iframe, video, embed, object {
display: block;
max-width: 100%;
}
.left, .right, .center {
display: block;
}
.center {
float: none;
text-align: center;
margin-right: auto;
margin-left: auto;
}
button, input[type=submit] {
cursor: pointer;
overflow: visible;
}
/* ------------------------------------------------------------
3. Body and Structural Foundations
------------------------------------------------------------ */
html {
scroll-behavior: smooth;
transition: background 0.3s ease;
}
::selection {
background: var(--ca);
color: var(--bg1);
}
body {
font-family: var(--font1);
font-size: var(--f5);
line-height: var(--g5);
color: var(--c1);
background-color: var(--bg1);
overflow-x: hidden;
transition: background 0.3s ease, color 0.3s ease;
}
#header {
color: var(--c-header);
background-color: var(--bg-header);
padding-top: var(--p-header-top);
padding-bottom: var(--p-header-bottom);
border-bottom: var(--b-header);
}
#content {
word-break: break-word;
color: var(--c-content);
background-color: var(--bg-content);
padding-top: var(--p-content-top);
padding-bottom: var(--p-content-bottom);
}
#footer {
font-family: var(--font-footer);
font-size: var(--f-footer);
line-height: var(--g-footer);
color: var(--c-footer);
background-color: var(--bg-footer);
padding-top: var(--p-footer-top);
padding-bottom: var(--p-footer-bottom);
border-top: var(--b-footer);
}
.wrap, .container {
box-sizing: border-box;
padding-left: var(--gutter-mobile);
padding-right: var(--gutter-mobile);
margin-left: auto;
margin-right: auto;
width: 100%;
max-width: var(--w-total);
}
@media all and (min-width: $b3) {
.wrap, .container {
padding-left: var(--gutter-full);
padding-right: var(--gutter-full);
}
}
.text {
max-width: var(--w-content);
margin-left: auto;
margin-right: auto;
}
/* ------------------------------------------------------------
4. Common Content Elements
------------------------------------------------------------ */
h1, h2, h3, h4 {
font-family: var(--font-heading);
font-weight: 500;
letter-spacing: -0.02em;
}
h1 {
font-size: var(--f2);
line-height: var(--g2);
}
h2 {
font-size: var(--f3);
line-height: var(--g3);
}
h3 {
font-size: var(--f4);
line-height: var(--g4);
}
h4 {
font-size: var(--f5);
line-height: var(--g5);
}
a {
color: var(--ca);
text-decoration: underline;
text-decoration-color: transparent;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
transition: color 0.2s ease, text-decoration-color 0.2s ease;
&:hover {
text-decoration-color: var(--ca);
}
}
strong, b {
font-weight: 600;
}
em, i {
font-style: italic;
}
blockquote {
font-family: var(--font-blockquote);
font-size: var(--f-blockquote);
line-height: var(--g-blockquote);
color: var(--c-blockquote);
background-color: var(--bg-blockquote);
padding-left: var(--x3);
border-left: var(--x5) solid rgba(0,0,0,0.1);
> :last-child {
margin-bottom: 0;
}
}
sub, sup {
color: var(--c2);
line-height: 0.5em;
}
code, pre, kbd {
font-family: $font-code;
font-size: var(--f5c);
line-height: 1em;
}
code {
background-color: rgba(0,0,0,0.08);
padding: var(--x6);
border-radius: var(--x5);
margin: 0 1px;
strong & {
font-weight: normal;
}
}
pre {
color: var(--c-pre);
background-color: var(--bg-pre);
overflow: auto;
word-wrap: normal;
tab-size: 4;
padding-left: var(--x3);
border-left: var(--x5) solid rgba(0,0,0,0.1);
}
kbd {
font-size: var(--f6);
line-height: 1em;
color: #4e4e4e;
background-color: #f7f7f7;
padding: var(--x6) var(--x5);
border: 1px solid #ccc;
border-radius: var(--x5);
box-shadow: 0 1px 0 rgba(0,0,0,0.2), 0 0 0 1px #fafafa inset, 0 0 0 1px #fff inset;
margin: 0 1px;
}
svg {
width: var(--f5);
height: var(--f5);
vertical-align: text-bottom;
}
hr {
border: 0;
border-bottom: 1px solid var(--c-rule);
margin: var(--x2) 0;
}
.drop-cap {
font-family: var(--font-drop-cap);
font-size: calc(var(--x2) * 2);
line-height: 1em;
var(--style-drop-cap)
color: var(--c-drop-cap);
margin-right: var(--x5);
float: left;
}
.small {
font-family: var(--font-caption);
font-size: var(--f6);
line-height: var(--g6);
color: var(--c-caption);
}
.callout {
color: var(--c-callout);
background-color: var(--bg-callout);
padding: var(--p-callout);
border: var(--b-callout);
border-left: 3px solid var(--ca);
border-radius: 0 var(--x4) var(--x4) 0;
&.alert {
color: var(--c-callout-alert);
background-color: var(--bg-callout-alert);
border-left-color: #B8441F;
}
&.note {
color: var(--c-callout-note);
background-color: var(--bg-callout-note);
border-left-color: #3D3630;
}
}
.highlight {
background-color: var(--bg-highlight);
padding: var(--x6) 0;
}
.impact {
font-family: var(--font-impact);
font-size: var(--f4);
line-height: var(--g4);
var(--style-impact)
color: var(--c-impact);
}
.pop {
box-shadow: 0 0 var(--x4) rgba(0,0,0,0.4);
}
.caption {
font-family: var(--font-caption);
font-size: var(--f6);
line-height: var(--g6);
color: var(--c-caption);
code {
font-size: var(--f6c);
}
.center + & {
text-align: center;
}
blockquote + & {
padding-left: calc(var(--x3) + var(--x5));
}
}
@media all and (min-width: $b2) {
h1 {
font-size: var(--f1);
line-height: var(--g1);
}
h2 {
font-size: var(--f2);
line-height: var(--g2);
}
h3 {
font-size: var(--f3);
line-height: var(--g3);
}
h4 {
font-size: var(--f4);
line-height: var(--g4);
}
.impact {
font-size: var(--f3);
line-height: var(--g3);
}
.left:not(.bar) {
float: left;
clear: both;
margin-right: var(--x2);
}
.right:not(.bar) {
float: right;
clear: both;
margin-left: var(--x2);
}
}
/* ------------------------------------------------------------
5. Dynamic Page Content (.page-content scope)
------------------------------------------------------------ */
.page-container + .page-container {
margin-top: var(--x1);
}
.page-content {
h1 {
margin-bottom: var(--x2);
}
h2 {
margin-top: var(--x1);
margin-bottom: var(--x2);
}
h3 {
margin-top: var(--x2);
margin-bottom: var(--x3);
}
h4 {
margin-bottom: var(--x4);
}
h1 + h2, h2 + h3, h1:first-child, h2:first-child, h3:first-child, hr + h2 {
margin-top: 0;
}
> :last-child {
margin-bottom: 0;
}
ul {
list-style-type: var(--list-style);
}
ul, ol {
margin-left: var(--list-margin);
}
ul ul, ul ol, ol ul, ol ol {
margin-top: var(--list-item-margin);
margin-bottom: 0;
margin-left: var(--list-nested-margin);
}
li {
margin-bottom: var(--list-item-margin);
&:last-child {
margin-bottom: 0;
}
}
.callout {
> :last-child {
margin-bottom: 0;
}
}
.caption {
margin-top: var(--m-caption);
h1 + &, h2 + & {
margin-top: var(--m-caption-h2-m);
}
h3 + & {
margin-top: var(--m-caption-h3-m);
margin-bottom: var(--x3);
}
}
p, ul, ol, blockquote, pre, img, .callout, .caption {
margin-bottom: var(--x2);
&:last-child {
margin-bottom: 0;
}
}
@media all and (min-width: $b2) {
h1 + .caption, h2 + .caption {
margin-top: var(--m-caption);
}
h3 + .caption {
margin-top: var(--m-caption-h3);
}
}
}
.page-title {
var(--style-headline)
a {
color: var(--c1);
text-decoration: none;
&:hover {
color: var(--ca);
}
}
}
.page-title:has(+.byline) {
margin-bottom: 0;
}
.byline {
font-family: var(--font-byline);
font-size: var(--f-byline);
line-height: var(--g-byline);
color: var(--c-byline);
margin-bottom: var(--x2);
}
.page-container, .headline-area, .page-content {
display: flow-root;
}
.modular-content {
.page-content + & {
margin-top: var(--x2);
}
> :last-child {
margin-bottom: 0;
}
}
.error-actions {
margin-top: var(--x2);
text-align: center;
}
/* ------------------------------------------------------------
6. Forms
------------------------------------------------------------ */
label {
display: block;
font-family: var(--font-label);
font-size: var(--f6);
line-height: var(--g6);
var(--style-label)
.required {
font-weight: normal;
color: var(--c-required);
}
}
input, textarea, select {
display: block;
width: auto;
max-width: 100%;
box-sizing: border-box;
font-family: inherit;
font-size: inherit;
line-height: 1em;
font-weight: inherit;
color: var(--c1);
background-color: transparent;
padding: var(--p-input);
border: var(--b-input);
border-radius: 0;
transition: border-color 0.2s ease, color 0.2s ease;
}
input[type=checkbox], input[type=radio], input[type=image], input[type=submit], select {
width: auto;
}
input[type=checkbox], input[type=radio] {
display: inline-block;
& + label {
display: inline;
font-weight: normal;
margin-left: var(--x6);
user-select: none;
}
}
textarea {
line-height: inherit;
resize: vertical;
}
select {
border: var(--b-select);
}
input:focus, textarea:focus, select:focus {
outline: none;
border-color: var(--ca);
}
button, input[type=submit], .button {
display: inline-block;
width: auto;
font-family: var(--font1);
font-size: var(--f6);
line-height: 1em;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.12em;
vertical-align: top;
color: var(--c-button);
text-decoration: none;
background-color: var(--bg-button);
padding: var(--p-button-y) var(--p-button-x);
border: 1px solid var(--bg-button);
border-radius: 0;
cursor: pointer;
user-select: none;
transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
&:hover, &:active {
text-decoration: none;
color: var(--bg1);
background-color: var(--ca);
border-color: var(--ca);
}
svg {
vertical-align: inherit;
}
}
button.save, .button.save {
color: var(--c-button-save);
background-color: var(--bg-button-save);
border-color: var(--bg-button-save);
&:hover, &:active {
color: var(--bg1);
background-color: var(--ca);
border-color: var(--ca);
}
}
button.delete, .button.delete {
color: var(--c-button-delete);
background-color: var(--bg-button-delete);
border-color: var(--bg-button-delete);
&:hover, &:active {
color: var(--bg1);
background-color: var(--ca);
border-color: var(--ca);
}
}
button.action, .button.action {
color: var(--c1);
background-color: transparent;
border-color: var(--c1);
&:hover, &:active {
color: var(--bg1);
background-color: var(--c1);
border-color: var(--c1);
}
}
button.update, .button.update {
color: var(--c-button-update);
background-color: var(--bg-button-update);
border-color: var(--bg-button-update);
&:hover, &:active {
color: var(--bg1);
background-color: var(--ca);
border-color: var(--ca);
}
}
/* ------------------------------------------------------------
7. Shared Component Styles — Header, Footer, Section helpers
------------------------------------------------------------ */
.ep-header {
border-bottom: 1px solid var(--c-rule);
padding: var(--x3) 0;
position: sticky;
top: 0;
background-color: var(--bg1);
z-index: 100;
}
.ep-nav {
display: flex;
justify-content: space-between;
align-items: center;
}
.ep-logo {
font-family: var(--font3);
font-weight: 700;
font-size: var(--f4);
line-height: 1em;
letter-spacing: -0.03em;
display: inline-flex;
align-items: center;
gap: var(--x5);
color: var(--c1);
text-decoration: none;
white-space: nowrap;
svg {
width: 28px;
height: 28px;
display: block;
flex-shrink: 0;
}
.accent {
color: var(--ca);
}
}
.nav-right {
display: flex;
align-items: center;
gap: var(--x3);
}
.ep-nav-cta {
display: inline-flex;
align-items: center;
background-color: var(--c1);
color: var(--bg1);
padding: 8px 16px;
border: 1px solid var(--c1);
font-family: var(--font1);
font-size: var(--f6);
line-height: 1.4;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.12em;
text-decoration: none;
white-space: nowrap;
transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
&:hover {
background-color: var(--ca);
border-color: var(--ca);
color: var(--bg1);
text-decoration: none;
}
}
.ep-nav ul {
list-style: none;
display: flex;
gap: var(--x1);
margin: 0;
margin-bottom: 0;
padding: 0;
li {
margin-bottom: 0;
}
a {
color: var(--c1);
text-decoration: none;
font-size: var(--f6);
line-height: 1em;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.08em;
white-space: nowrap;
transition: color 0.2s ease;
&:hover, &.is-active {
color: var(--ca);
}
}
}
.theme-toggle {
background: transparent;
border: 1px solid var(--c-rule);
width: 36px;
height: 36px;
border-radius: 50%;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--c1);
padding: 0;
transition: border-color 0.2s ease, color 0.2s ease;
&:hover {
border-color: var(--ca);
color: var(--ca);
}
svg {
width: 16px;
height: 16px;
}
.sun {
display: none;
}
.moon {
display: block;
}
}
[data-theme="dark"] .theme-toggle .sun {
display: block;
}
[data-theme="dark"] .theme-toggle .moon {
display: none;
}
.ep-section {
border-bottom: 1px solid var(--c-rule);
}
.ep-section-label {
font-size: var(--f6);
line-height: var(--g6);
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ca);
margin-bottom: var(--x2);
display: block;
font-weight: 500;
}
.ep-footer {
padding: calc(var(--x1) * 1.3) 0 calc(var(--x1) * 0.65);
background-color: var(--bg1);
color: var(--c1);
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: calc(var(--x1) * 0.95);
margin-bottom: calc(var(--x1) * 0.95);
}
.footer-brand {
.ep-logo {
margin-bottom: var(--x3);
display: inline-flex;
}
p {
font-size: var(--f6);
line-height: var(--g6);
color: var(--c-muted);
max-width: 30ch;
margin-bottom: 0;
}
}
.footer-col {
h4 {
font-family: var(--font1);
font-size: var(--f6);
line-height: var(--g6);
text-transform: uppercase;
letter-spacing: 0.12em;
margin-bottom: var(--x3);
color: var(--ca);
font-weight: 500;
}
ul {
list-style: none;
margin: 0;
margin-bottom: 0;
padding: 0;
}
li {
margin-bottom: var(--x5);
&:last-child {
margin-bottom: 0;
}
}
a {
color: var(--c2);
text-decoration: none;
font-size: var(--f6);
line-height: var(--g6);
transition: color 0.2s ease;
&:hover {
color: var(--ca);
}
}
}
.footer-bottom {
border-top: 1px solid var(--c-rule);
padding-top: var(--x2);
display: flex;
justify-content: space-between;
font-size: var(--f6);
line-height: var(--g6);
color: var(--c-muted);
gap: var(--x4);
flex-wrap: wrap;
}
/* ------------------------------------------------------------
8. Template Sections — Home (Hero, Manifesto, Work, Services, Suite, Pull, CTA)
------------------------------------------------------------ */
.hero {
padding: calc(var(--x1) * 2.2) 0 calc(var(--x1) * 2);
position: relative;
}
.hero--short {
padding: calc(var(--x1) * 2.2) 0 calc(var(--x1) * 1.65);
}
.hero-meta {
display: flex;
justify-content: space-between;
font-size: var(--f6);
line-height: var(--g6);
letter-spacing: 0.15em;
text-transform: uppercase;
margin-bottom: calc(var(--x1) * 1.3);
color: var(--c-muted);
gap: var(--x3);
flex-wrap: wrap;
}
.hero h1 {
font-family: var(--font3);
font-size: clamp(var(--f2), 8vw, calc(var(--f1) * var(--phi) * 1.62));
line-height: clamp(var(--g2), 7.6vw, calc(var(--g1) * var(--phi) * 1.1));
font-weight: 500;
letter-spacing: -0.035em;
max-width: 14ch;
margin-bottom: calc(var(--x1) * 0.95);
text-transform: none;
}
.hero h1 em {
font-style: normal;
font-weight: 500;
color: var(--ca);
}
.hero--short h1 {
font-size: clamp(var(--f2), 7.5vw, calc(var(--f1) * var(--phi) * 1.4));
line-height: clamp(var(--g2), 7.1vw, calc(var(--g1) * var(--phi) * 1.05));
max-width: 16ch;
margin-bottom: calc(var(--x1) * 0.8);
}
.hero-foot {
display: grid;
grid-template-columns: 1fr 1fr;
gap: calc(var(--x1) * 1.3);
align-items: end;
margin-top: var(--x2);
}
.hero-lede {
font-family: var(--font1);
font-size: var(--f4);
line-height: var(--g4);
max-width: 42ch;
color: var(--c2);
margin-bottom: 0;
}
.hero-lede--serif {
font-family: var(--font2);
font-weight: 300;
font-size: var(--f3);
line-height: var(--g3);
max-width: 50ch;
}
.hero-cta {
text-align: right;
}
.btn {
display: inline-block;
font-family: var(--font1);
background-color: var(--c1);
color: var(--bg1);
padding: calc(var(--x3) * 1.1) calc(var(--x2) * 1.4);
text-decoration: none;
font-size: var(--f6);
line-height: 1em;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.12em;
border: 1px solid var(--c1);
cursor: pointer;
white-space: nowrap;
transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
&:hover {
background-color: var(--ca);
border-color: var(--ca);
color: var(--bg1);
}
}
.btn-ghost {
background-color: transparent;
color: var(--c1);
&:hover {
background-color: var(--c1);
color: var(--bg1);
border-color: var(--c1);
}
}
.manifesto {
padding: calc(var(--x1) * 2) 0;
}
.manifesto-grid {
display: grid;
grid-template-columns: 1fr 2fr;
gap: calc(var(--x1) * 1.6);
}
.manifesto h2 {
font-family: var(--font2);
font-size: clamp(var(--f2), 5vw, calc(var(--f1) * var(--phi) * 1.05));
line-height: clamp(var(--g2), 4.75vw, calc(var(--g1) * var(--phi) * 1.02));
font-weight: 300;
letter-spacing: -0.03em;
em {
font-style: italic;
color: var(--ca);
}
}
.manifesto-body {
p {
font-family: var(--font2);
font-weight: 300;
font-size: var(--f4);
line-height: var(--g4);
margin-bottom: var(--x3);
max-width: 58ch;
&:last-child {
margin-bottom: 0;
}
}
em {
font-style: italic;
color: var(--ca);
}
}
.work {
padding: calc(var(--x1) * 2) 0;
}
.work-head {
display: grid;
grid-template-columns: 1fr 1fr;
gap: calc(var(--x1) * 1.3);
margin-bottom: calc(var(--x1) * 1.3);
align-items: end;
}
.work h2 {
font-family: var(--font3);
font-size: clamp(var(--f2), 5vw, calc(var(--f1) * var(--phi)));
line-height: clamp(var(--g2), 4.75vw, calc(var(--g1) * var(--phi)));
font-weight: 500;
letter-spacing: -0.03em;
}
.work h2 em {
font-style: normal;
color: var(--ca);
}
.work-head p {
font-size: var(--f4);
line-height: var(--g4);
color: var(--c2);
max-width: 45ch;
margin-bottom: 0;
}
.work-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
border-top: 1px solid var(--c-rule);
}
.work-card {
padding: var(--x1) var(--x2) var(--x1) 0;
border-right: 1px solid var(--c-rule);
display: flex;
flex-direction: column;
min-height: 280px;
text-decoration: none;
color: var(--c1);
transition: background-color 0.25s ease;
&:last-child {
border-right: none;
padding-right: 0;
}
&:not(:first-child) {
padding-left: var(--x2);
}
&:hover {
background-color: var(--bg2);
}
&[aria-disabled="true"] {
cursor: default;
&:hover {
background-color: transparent;
}
}
}
.work-num {
font-family: var(--font2);
font-size: var(--f6);
line-height: var(--g6);
font-style: italic;
color: var(--c-muted);
margin-bottom: var(--x3);
}
.work-title {
font-family: var(--font3);
font-size: var(--f3);
line-height: var(--g3);
font-weight: 500;
letter-spacing: -0.02em;
margin-bottom: var(--x5);
}
.work-desc {
font-size: var(--f5);
line-height: var(--g5);
color: var(--c2);
margin-bottom: auto;
}
.work-link {
font-size: var(--f6);
line-height: var(--g6);
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--ca);
margin-top: var(--x2);
font-weight: 500;
}
.work-card[aria-disabled="true"] .work-link {
color: var(--c-muted);
}
.services {
padding: calc(var(--x1) * 2) 0;
}
.services-head {
display: grid;
grid-template-columns: 1fr 1fr;
gap: calc(var(--x1) * 1.3);
margin-bottom: calc(var(--x1) * 1.6);
align-items: end;
}
.services h2 {
font-family: var(--font2);
font-size: clamp(var(--f2), 5vw, calc(var(--f1) * var(--phi)));
line-height: clamp(var(--g2), 4.75vw, calc(var(--g1) * var(--phi)));
font-weight: 300;
letter-spacing: -0.03em;
}
.services-head p {
font-size: var(--f4);
line-height: var(--g4);
color: var(--c2);
max-width: 45ch;
margin-bottom: 0;
}
.service-list {
border-top: 1px solid var(--c-rule);
}
.service {
border-bottom: 1px solid var(--c-rule);
padding: var(--x1) 0;
display: grid;
grid-template-columns: 80px 1fr 2fr 180px;
gap: var(--x2);
align-items: baseline;
color: var(--c1);
text-decoration: none;
transition: background-color 0.25s ease, padding 0.25s ease;
cursor: pointer;
&:hover {
background-color: var(--bg2);
padding-left: var(--x3);
padding-right: var(--x3);
}
}
.service-num {
font-family: var(--font2);
font-size: var(--f5);
line-height: 1em;
font-style: italic;
color: var(--c-muted);
}
.service-name {
font-family: var(--font2);
font-size: var(--f3);
line-height: var(--g3);
font-weight: 400;
letter-spacing: -0.02em;
}
.service-desc {
font-size: var(--f5);
line-height: var(--g5);
color: var(--c2);
}
.service-price {
font-family: var(--font2);
font-size: var(--f4);
line-height: var(--g4);
text-align: right;
color: var(--c1);
}
.service-price span {
display: block;
font-family: var(--font1);
font-size: var(--f6);
line-height: var(--g6);
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--c-muted);
margin-bottom: var(--x6);
font-weight: 500;
}
.suite {
padding: calc(var(--x1) * 2) 0;
background-color: var(--bg-suite);
color: var(--c-suite);
transition: background-color 0.3s ease, color 0.3s ease;
border-bottom: 1px solid var(--c-rule);
.ep-section-label {
color: var(--ca-suite);
}
a {
color: var(--ca-suite);
}
}
.suite-head {
margin-bottom: calc(var(--x1) * 1.3);
max-width: 60ch;
p {
font-size: var(--f4);
line-height: var(--g4);
opacity: 0.85;
margin-bottom: 0;
}
}
.suite h2 {
font-family: var(--font2);
font-size: clamp(var(--f2), 5vw, calc(var(--f1) * var(--phi)));
line-height: clamp(var(--g2), 4.75vw, calc(var(--g1) * var(--phi)));
font-weight: 300;
letter-spacing: -0.03em;
margin-bottom: var(--x2);
em {
font-style: italic;
color: var(--ca-suite);
}
}
.suite-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
border-top: 1px solid var(--rule-suite);
}
.suite-item {
padding: var(--x1) var(--x2);
border-bottom: 1px solid var(--rule-suite);
border-right: 1px solid var(--rule-suite);
&:nth-child(3n) {
border-right: none;
padding-right: 0;
}
&:nth-child(3n+1) {
padding-left: 0;
}
h3 {
font-family: var(--font2);
font-size: var(--f4);
line-height: var(--g4);
font-weight: 400;
margin-bottom: var(--x5);
span {
color: var(--ca-suite);
font-style: italic;
font-weight: 300;
}
}
p {
font-size: var(--f5);
line-height: var(--g5);
opacity: 0.75;
margin-bottom: 0;
}
}
.pull {
padding: calc(var(--x1) * 2.5) 0;
text-align: center;
border-bottom: 1px solid var(--c-rule);
}
.pull--cream {
background-color: var(--bg2);
padding: calc(var(--x1) * 2.25) 0;
}
.pull blockquote {
font-family: var(--font2);
font-size: clamp(var(--f3), 4vw, var(--f1));
line-height: clamp(var(--g3), 4vw, var(--g1));
font-weight: 300;
font-style: italic;
letter-spacing: -0.02em;
max-width: 22ch;
margin: 0 auto;
padding-left: 0;
border-left: none;
background-color: transparent;
&::before {
content: '“';
color: var(--ca);
}
&::after {
content: '”';
color: var(--ca);
}
}
.pull--cream blockquote {
max-width: 26ch;
}
.cta {
padding: calc(var(--x1) * 2.2) 0;
border-bottom: 1px solid var(--c-rule);
}
.cta-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: calc(var(--x1) * 1.6);
align-items: center;
}
.cta h2 {
font-family: var(--font2);
font-size: clamp(var(--f2), 5vw, calc(var(--f1) * var(--phi) * 1.05));
line-height: clamp(var(--g2), 4.75vw, calc(var(--g1) * var(--phi) * 1.02));
font-weight: 300;
letter-spacing: -0.03em;
em {
font-style: italic;
color: var(--ca);
}
}
.cta-body {
p {
font-size: var(--f4);
line-height: var(--g4);
color: var(--c2);
margin-bottom: var(--x2);
max-width: 42ch;
}
}
.cta-buttons {
display: flex;
gap: var(--x3);
flex-wrap: wrap;
}
/* ------------------------------------------------------------
9. Template Sections — About (Body Section) and Contact (Form, Smallprint)
------------------------------------------------------------ */
.body-section {
padding: calc(var(--x1) * 2) 0;
border-bottom: 1px solid var(--c-rule);
}
.body-grid {
display: grid;
grid-template-columns: 1fr 2fr;
gap: calc(var(--x1) * 1.6);
}
.body-section h2 {
font-family: var(--font3);
font-size: var(--f3);
line-height: var(--g3);
font-weight: 500;
letter-spacing: -0.02em;
position: sticky;
top: calc(var(--x1) * 2);
}
.body-text {
p {
font-family: var(--font2);
font-weight: 300;
font-size: var(--f4);
line-height: var(--g4);
margin-bottom: var(--x3);
max-width: 58ch;
&:last-child {
margin-bottom: 0;
}
}
em {
font-style: italic;
color: var(--ca);
}
}
.form-section {
padding: calc(var(--x1) * 2) 0;
border-bottom: 1px solid var(--c-rule);
}
.form-grid {
display: grid;
grid-template-columns: 1fr 1.3fr;
gap: calc(var(--x1) * 1.6);
}
.form-side {
h2 {
font-family: var(--font3);
font-size: var(--f3);
line-height: var(--g3);
font-weight: 500;
letter-spacing: -0.02em;
margin-bottom: var(--x3);
}
p {
font-family: var(--font2);
font-weight: 300;
font-size: var(--f4);
line-height: var(--g4);
margin-bottom: var(--x3);
color: var(--c2);
}
em {
font-style: italic;
color: var(--ca);
}
}
.direct {
margin-top: var(--x2);
padding-top: var(--x2);
border-top: 1px solid var(--c-rule);
font-size: var(--f5);
line-height: var(--g5);
color: var(--c2);
strong {
display: block;
font-family: var(--font1);
font-size: var(--f6);
line-height: var(--g6);
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--ca);
margin-bottom: var(--x6);
font-weight: 500;
}
a {
color: var(--c1);
text-decoration: underline;
text-decoration-color: currentColor;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
&:hover {
color: var(--ca);
text-decoration-color: var(--ca);
}
}
}
form.ep-form {
display: flex;
flex-direction: column;
gap: var(--x2);
}
.field {
display: flex;
flex-direction: column;
label {
font-size: var(--f6);
line-height: var(--g6);
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--c-muted);
margin-bottom: var(--x5);
font-weight: 500;
}
.required {
color: var(--ca);
}
input,
textarea,
select {
background-color: transparent;
border: none;
border-bottom: 1px solid var(--c1);
padding: var(--x5) 0;
font-family: var(--font1);
font-size: var(--f4);
line-height: 1em;
color: var(--c1);
border-radius: 0;
width: 100%;
}
textarea {
min-height: 140px;
line-height: var(--g4);
resize: vertical;
}
select {
appearance: none;
background-image: var(--select-chevron);
background-repeat: no-repeat;
background-position: right var(--x6) center;
padding-right: var(--x3);
}
input:focus,
textarea:focus,
select:focus {
outline: none;
border-bottom-color: var(--ca);
}
.help {
font-size: var(--f6);
line-height: var(--g6);
color: var(--c-muted);
margin-top: var(--x6);
font-family: var(--font1);
}
}
.form-submit {
margin-top: var(--x5);
align-self: flex-start;
}
.smallprint {
padding: calc(var(--x1) * 1.3) 0;
border-bottom: 1px solid var(--c-rule);
}
.smallprint-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: calc(var(--x1) * 0.95);
}
.smallprint-item {
h4 {
font-family: var(--font1);
font-size: var(--f6);
line-height: var(--g6);
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--ca);
margin-bottom: var(--x5);
font-weight: 500;
}
p {
font-size: var(--f5);
line-height: var(--g5);
color: var(--c2);
margin-bottom: 0;
}
}
/* ------------------------------------------------------------
10. Responsive — Mobile collapse at 900px
------------------------------------------------------------ */
@media all and (max-width: 900px) {
/* Mobile nav: drop scroll-anchor links first (they are not destinations).
Branding + CTA + Contact remain visible. About drops at narrower widths. */
.ep-nav .nav-scroll {
display: none;
}
.ep-header {
position: sticky;
}
.hero-foot,
.manifesto-grid,
.services-head,
.work-head,
.cta-grid,
.body-grid,
.form-grid {
grid-template-columns: 1fr;
gap: var(--x2);
}
.work-grid {
grid-template-columns: 1fr;
}
.work-card {
border-right: none;
border-bottom: 1px solid var(--c-rule);
padding: var(--x2) 0;
min-height: auto;
&:last-child {
border-bottom: none;
}
&:not(:first-child) {
padding-left: 0;
}
}
.hero-cta {
text-align: left;
}
.suite-grid {
grid-template-columns: 1fr;
}
.suite-item {
border-right: none;
padding-left: 0;
padding-right: 0;
}
.service {
grid-template-columns: 1fr;
gap: var(--x5);
padding: var(--x2) 0;
&:hover {
padding-left: 0;
padding-right: 0;
}
}
.service-price {
text-align: left;
}
.body-section h2 {
position: static;
}
.smallprint-grid {
grid-template-columns: 1fr;
gap: var(--x2);
}
.footer-grid {
grid-template-columns: 1fr 1fr;
}
.footer-bottom {
flex-direction: column;
}
}