/* ssw.css — the public Seva & Satsang Weekends page.
Authored, like sv-style/ninja-match-gravity.css. The page's header,
navigation and footer are the site's own, transplanted whole, so this
styles ONLY the content block between them.
Values are not invented. Labels, helper text, inputs and focus follow
ninja-match-gravity.css, which is the file that already makes the
public accommodation form match the house style:
labels 12px / 900 / 1.1px / uppercase; body and inputs in
ff-meta-serif-web-pro at 500 / 18px; underline inputs rather than
boxes; focus turns the underline brand orange. */
.sv-ssw { max-width: 46rem; margin: 0 auto; padding: 2rem 1.25rem 4rem; }
/* ---- the hero ----
THE PHOTOGRAPH IS NEVER CROPPED. Two rounds were lost to a CSS
background sized with `cover` against a fixed min-height: the leftover
was cropped away, and it took the log the first time and everyone's
heads the second. There is no way to tell `cover` which part matters.
So the image is an ![]()
and the section carries the photograph's own
3:2 ratio. Nothing is cut, at any width, and it cannot regress —
getting this wrong again would need someone to change the ratio.
Cost of that choice, stated plainly: the hero is taller than the
site's 544px and its height varies with the window (1280px wide gives
853px). The accommodation page's hero is a fixed 544px because its
photograph tolerates cropping. This one does not.
Kept from the accommodation page: the readability overlay
(linear-gradient 90deg #263238E0 -> transparent, multiply), the white
heading, the 60/40/20px side padding, and the 1140px content width. */
.sv-ssw-hero { position: relative; }
/* A CHOSEN CROP, not a leftover one. This is the important distinction:
the ratio and the framing are both fixed here, so the same slice of
the photograph is shown at every width and nothing can drift into the
subject the way `cover` against a min-height twice did.
WHERE THE SUBJECT IS, measured off the file — do not change the two
values below without re-checking these:
topmost head (hair, man in maroon) 6.6% down
bottom of the log 97.0% down
The photograph is 1.50:1. At 1.62:1 the visible band is 92.6% of its
height, and `center 72%` places that band from 5.4% to 98.0% — so
there is about 1.2% of clearance above the highest head and 1.0%
below the log. Slightly off the top and slightly off the bottom, as
asked, with the subject still whole.
If the ratio is ever widened past about 1.66 the heads start to go. */
.sv-ssw-hero-img {
display: block;
width: 100%;
aspect-ratio: 1.62;
object-fit: cover;
object-position: center 72%;
}
/* The readability gradient. Same intent and the same colour as the
accommodation page's — #263238 at 88% fading to nothing, left to
right — but as a PLAIN alpha gradient rather than mix-blend-mode:
multiply.
Multiply is what Elementor uses there, over a CSS background-image on
the section itself. Over an ![]()
child it blacked the photograph out
completely: the blend took the section as its backdrop rather than the
picture. Since the visible result is what matters and a straight alpha
gradient produces it, this is the same look without depending on how a
blend mode resolves its backdrop. */
/* The readability gradient: ANGLED, and gone before the faces.
The words sit at the bottom left, so the dark needs to be there and
nowhere else. A 90deg gradient darkened the full height of the
picture, including the faces across the middle — which is what made
the whole photograph look dimmed.
28deg runs it from the bottom-left corner up and to the right, and it
is fully clear by 52%, so it passes under the heading and fades out
below the faces. Black rather than the site's #263238 because this is
doing a different job from the accommodation page's overlay: theirs
tints a whole hero, this one only has to make two lines legible. */
.sv-ssw-hero::after {
content: '';
position: absolute;
inset: 0;
background-image: linear-gradient(28deg,
rgba(0, 0, 0, .82) 0%,
rgba(0, 0, 0, .55) 22%,
rgba(0, 0, 0, .18) 38%,
rgba(0, 0, 0, 0) 52%);
pointer-events: none;
}
/* The heading, LOW in the hero.
Measured across seven pages of the site, the h1 sits between 17% and
44% down its hero — /about/ 17%, /accommodation/ 19%, /day-visits/
25%, /visit-skanda-vale/ 28%, /temples/ and /animal-sanctuary/ 33%,
/donate/ 44%. None of them bottom-aligns it. 62% here is BELOW that
whole range, and deliberately so: this hero is much taller than
theirs, so the same percentage would leave the heading floating in the
middle of a tall photograph. Anchoring it to a fixed distance from the
bottom keeps it looking the same as theirs however tall the picture
gets. */
.sv-ssw-hero-inner {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
padding: 0 60px 7.5rem; /* was 5rem: lifts the h1 from 76% to ~68% */
}
/* The centred container the heading aligns to.
1155px, MEASURED on the accommodation page's hero container. The
1140px used before came from Elementor's stylesheet default, which
this site's kit overrides — a good example of why the reference has to
be measured rather than read out of a CSS file.
This lives on its own element rather than on `> *`, because
`.sv-ssw-hero .sv-ssw-title` sets its own max-width and margin and was
winning both — leaving the heading 60px from the window edge instead
of on the container's edge. Identical at 1280px by coincidence, 155px
out at 1600px. */
.sv-ssw-hero-box {
max-width: 1155px;
margin: 0 auto;
}
@media (max-width: 60rem) { .sv-ssw-hero-inner { padding: 0 40px 2.75rem; } }
@media (max-width: 40rem) { .sv-ssw-hero-inner { padding: 0 20px 1.5rem; } }
/* White over the photograph, as the accommodation page's hero heading is
(--e-global-color-9eba703 there, which is #FFFFFF). */
.sv-ssw-hero .sv-ssw-title { color: #fff; margin: 0; max-width: 34rem; }
/* The dates, now the first thing in the section under the hero.
The orange is READ FROM THE SITE, not picked: --e-global-color-primary
(#CA4D2A) is what .elementor-button uses, which is the Donate button in
the header, and what ninja-match-gravity.css already uses for the
required asterisk on the public accommodation form.
`.sv-ssw h2` also matches this element, so it is qualified to win —
the same specificity trap as before. */
.sv-ssw h2.sv-ssw-dates {
font-family: var(--e-global-typography-primary-font-family, brandon-grotesque), sans-serif;
font-weight: 900;
/* 40px, against the site's own h2 of 48px ("Practical Overview" on the
accommodation page, measured). Not the full 48px because that is the
size the site gives a SECTION heading, and this is a date sitting
directly under a 60px h1 — at 48px the two compete. 40px is
unmistakably an h2 rather than the 18px it was, and still yields to
the title. Flagged in the report as the one size on this page that
is between two of the site's values rather than equal to one. */
font-size: 40px;
line-height: 1.15;
letter-spacing: normal;
text-transform: uppercase;
color: var(--e-global-color-primary, #CA4D2A);
margin: 3.5rem 0 2rem; /* room above it, as asked */
padding: 0;
border: 0;
}
/* The break after "1st" only where there is room for it. On a phone the
line wraps anyway, and forcing it there gave three ragged lines. */
.sv-ssw-br { display: inline; }
@media (max-width: 40rem) {
.sv-ssw h2.sv-ssw-dates { font-size: 28px; margin: 2.5rem 0 1.5rem; }
.sv-ssw-br { display: none; }
}
/* ---- images ----
The hard offset block is the site's own shadow, from the karolo theme:
.box-shadow.bottom-right.purple img is 24px 24px 0 0 in #6E537E. Those
selectors are scoped to .elementor-widget-image, which this page's
figures are not, so the same values are restated here rather than a
different shadow being invented. */
.sv-ssw figure { margin: 0; }
.sv-ssw figure img { display: block; width: 100%; height: auto; }
.box-shadow.bottom-right.purple img {
box-shadow: 24px 24px 0px 0px var(--e-global-color-6b5cc10, #6E537E);
}
/* The offset needs room, or it is clipped by whatever is beside it. */
.sv-ssw-aside, .sv-ssw-glance-img { margin-right: 24px; margin-bottom: 24px; }
@media (max-width: 34rem) {
.box-shadow.bottom-right.purple img { box-shadow: 12px 12px 0px 0px var(--e-global-color-6b5cc10, #6E537E); }
.sv-ssw-aside, .sv-ssw-glance-img { margin-right: 12px; margin-bottom: 12px; }
}
/* The chalkboard moved to the purple section, so this is a single column
of copy. Held to 38rem — about 75 characters — rather than stretched
across the whole container, because a 46rem measure of 18px serif is
already at the top of what is comfortable to read and the full width
would be worse, not better. */
.sv-ssw-intro-grid { display: block; }
/* 747px, MEASURED not chosen: that is the width of the body paragraphs
on /visit-skanda-vale/accommodation/ at a 1280px window (700, 747,
747 across its text blocks). The previous 38rem was 608px, which is
why the column looked narrow next to the rest of the site. */
.sv-ssw-copy { max-width: 747px; }
.sv-ssw h2 {
font-family: var(--e-global-typography-primary-font-family, brandon-grotesque), sans-serif;
font-weight: 900;
letter-spacing: 1.1px;
text-transform: uppercase;
font-size: 1.05rem;
color: var(--e-global-color-text, #263238);
margin: 2.5rem 0 .9rem;
padding-bottom: .4rem;
border-bottom: 1px solid rgba(38, 50, 56, .12);
}
.sv-ssw p, .sv-ssw li, .sv-ssw td {
font-family: var(--e-global-typography-text-font-family, ff-meta-serif-web-pro), serif;
font-weight: var(--e-global-typography-text-font-weight, 500);
font-size: var(--e-global-typography-text-font-size, 18px);
line-height: 1.6;
color: var(--e-global-color-text, #263238);
}
/* Same trap: `.sv-ssw p` would otherwise beat these. */
.sv-ssw p.sv-ssw-hint, .sv-ssw span.sv-ssw-hint {
font-size: .95rem; line-height: 1.45; color: rgba(38, 50, 56, .72);
}
/* ---- the purple section ----
The site's own treatment for a coloured band, as on
samadhi-guru-sri-subramanium: the deep purple with the theme's
repeating-tile texture multiplied over it, and generous padding. The
theme supplies .textured-bg; position:relative is added here because
that class positions its ::before absolutely and needs a positioned
parent. */
/* Laid out like PRACTICAL OVERVIEW on the accommodation page
(.elementor-element-9873ac0 there): a FULL-WIDTH section — that page
uses elementor-section-full_width, so its container has no max-width
and its two columns are a true 50/50 of the viewport — with 100px of
vertical padding and NONE horizontal, the 40px side padding living on
the columns instead.
The previous version boxed it to 60rem with a 26rem image column,
which is why the photograph floated and the table was cramped. */
.sv-ssw-purple {
position: relative;
overflow: hidden;
background-color: var(--e-global-color-a71f620, #574065);
padding: 100px 0;
margin: 3rem 0;
}
@media (max-width: 60rem) { .sv-ssw-purple { padding: 80px 0; } }
@media (max-width: 40rem) { .sv-ssw-purple { padding: 50px 0; } }
/* Everything must sit above the texture layer. */
.sv-ssw-purple > * { position: relative; z-index: 1; }
/* 60/40 IN THE IMAGES' FAVOUR, not the 50/50 the accommodation page
uses. Elliot's call and a deliberate departure: that page's two columns
are equal, and the brief here is that the pictures should be the
dominant element rather than the table. Everything else about the
section — full width, the vertical padding, the 40px on each column,
the texture — is still that page's. */
.sv-ssw-purple-inner { display: block; }
@media (min-width: 60rem) {
.sv-ssw-purple-inner {
display: grid;
/* 56/44, from 60/40. The table was column-limited rather than
cap-limited, so raising its max-width alone did nothing — the
column itself had to give. The images are still the dominant
element. */
grid-template-columns: 56fr 44fr;
gap: 0;
align-items: start;
}
}
/* The 40px the accommodation page puts on each column. */
.sv-ssw-glance-col, .sv-ssw-img-col { padding: 0 40px; }
@media (max-width: 40rem) { .sv-ssw-glance-col, .sv-ssw-img-col { padding: 0 20px; } }
/* ---- the image stack ----
Kitchen photograph as the main image, the chalkboard under it at a
smaller scale and overlapping it, and the heading overlapping the main
image rather than sitting above the column. The stack is a positioning
context for both. */
.sv-ssw-img-stack { position: relative; }
/* "AT A GLANCE" sits across the bottom-left of the main image.
ANCHORED, not nudged. The first attempt used a negative top margin and
landed 5px BELOW the image instead of over it, because the offset had
to guess at the heading's own line box and the figure's shadow margin.
Absolute positioning against the image's own wrapper cannot miss,
whatever the text does.
A dark scrim behind the text only — the same #263238 the hero overlay
uses — because white type over a photograph is not reliably readable,
and this photograph is bright exactly where the words go. */
.sv-ssw-main-wrap { position: relative; }
/* "AT A GLANCE" now sits ABOVE THE TABLE, in the table's own column,
pulled left so it overlaps the kitchen photograph slightly. No panel
behind it — the dark scrim from the last pass is gone, and with it the
only element on this page that had no precedent on the site.
It overlaps by 2rem, which is enough to read as deliberate and little
enough that the words stay on the purple rather than on the
photograph, so nothing needs a scrim to be legible. */
.sv-ssw-purple h2.sv-ssw-glance-heading {
position: relative;
z-index: 2;
/* ALIGNED WITH THE TABLE, not overlapping the photograph. The overlap
was tried and did not look right; the heading now shares the table's
left edge and sits above it, which is what a section heading over a
table should do. The table's own left margin is 0, so this is 0. */
margin: 0 0 1.25rem 0;
padding: 0;
border: 0;
background: none;
color: #fff;
}
/* The chalkboard: smaller, pulled up so it clearly overlaps the main
image, and held right so it cannot collide with the heading. */
/* No shadow on the chalkboard. The 8px purple ring is gone: the site's
shadow utility is for a feature image, and using it on both pictures
here flattened the difference between the main image and the smaller
one. The kitchen photograph keeps it. */
.sv-ssw-aside {
position: relative;
z-index: 1;
width: 42%;
max-width: 17rem;
/* 2.5rem off the right, so it is not flush with the column edge. */
margin: -8rem 2.5rem 0 auto;
}
.sv-ssw-aside img { display: block; width: 100%; height: auto; }
@media (max-width: 60rem) {
.sv-ssw-aside { width: 40%; margin-top: -6rem; }
}
@media (max-width: 34rem) {
.sv-ssw-aside { width: 46%; margin-top: -4rem; }
}
.sv-ssw-purple h2 {
color: #fff;
border-bottom: 0;
margin-top: 0;
}
/* Fills its column. The 24px offset shadow needs room on the right, so
the figure is inset by that much rather than the image being shrunk. */
.sv-ssw-glance-img { margin: 0 24px 24px 0; }
@media (max-width: 34rem) { .sv-ssw-glance-img { margin: 0 12px 12px 0; } }
.sv-ssw-glance-img img { width: 100%; height: auto; }
/* ---- at a glance ----
Was cramped and the columns did not line up: the label is 12px Brandon
with a 20px line-height, the value 18px serif with a 1.6 line-height, so
their first lines sat on different baselines. Fixed by giving the label
the value's line-height and nudging it down by the difference in cap
height, and by opening the rows up. */
/* THE TABLE STARTS BELOW THE TOP OF THE IMAGE, as Practical Overview
staggers its two columns. Worth naming the difference: that page pulls
its TEXT column UP by 16px against the images; here the table is
pushed DOWN, which is the same idea of a stagger in the other
direction — the images are the dominant element on this page, so they
are the thing that starts first.
And it no longer runs edge to edge in its column: a right margin gives
it air on the outside, the 15px cell padding gives it air inside, and
the 40fr column plus that margin makes it narrower overall. */
.sv-ssw-glance {
width: 100%;
border-collapse: collapse;
margin: 0 1rem 0 0;
max-width: 30rem;
}
@media (min-width: 60rem) { .sv-ssw-glance-col { padding-top: 3.5rem; } }
@media (max-width: 60rem) {
.sv-ssw-glance-col { padding-top: 3rem; }
.sv-ssw-glance { margin-right: 0; max-width: none; }
}
/* PADDING IS THE SITE'S OWN NUMBER, not one picked here. The theme's
table default is `table td, table th { padding: 15px; line-height: 1.5 }`
— so 15px it is, on all four sides. The previous version had
`padding: 1.15rem 0`, i.e. no horizontal padding at all, which is why
the labels and values sat hard against the edges of their columns.
vertical-align stays BASELINE rather than the theme's `top`, and that
is a deliberate difference: the label is 12px and the value 18px, so
top-aligning them puts their first lines on different baselines. This
is the one place the site's own rule is not followed, because
following it here would undo the alignment fix. */
.sv-ssw-glance th, .sv-ssw-glance td {
text-align: left;
vertical-align: baseline;
padding: 15px;
/* border:0 FIRST, deliberately. The theme's default is
`table td, table th { border: 1px solid hsla(0,0%,50%,.502) }` and
setting only border-bottom left the theme's grey line on the other
three sides — a full grey grid over the purple, which is not what
any table on this site looks like. */
border: 0;
border-bottom: 1px solid rgba(255, 255, 255, .22);
}
/* Flush the outer edges with the column, so only the gutter BETWEEN the
two columns gets the padding. */
.sv-ssw-glance th { padding-left: 0; }
.sv-ssw-glance td { padding-right: 0; }
.sv-ssw-glance tr:last-child th,
.sv-ssw-glance tr:last-child td { border-bottom: 0; }
.sv-ssw-glance th {
font-family: var(--e-global-typography-primary-font-family, brandon-grotesque), sans-serif;
font-size: 12px; font-weight: 900; letter-spacing: 1.1px;
line-height: 1.6; /* match the value's leading */
text-transform: uppercase; white-space: nowrap;
/* 7.5rem: "ACCOMMODATION" is the longest label and measures about
6.6rem at 12px Brandon Black, so anything wider is taken from the
values — which is the column that has to wrap. */
width: 7.5rem;
color: rgba(255, 255, 255, .78);
}
.sv-ssw-glance td { color: #fff; line-height: 1.6; }
@media (max-width: 46rem) {
.sv-ssw-glance th, .sv-ssw-glance td {
display: block; width: auto; border: 0;
white-space: normal;
}
.sv-ssw-glance th { padding: 15px 0 4px; }
.sv-ssw-glance td { padding: 0 0 15px; border-bottom: 1px solid rgba(255, 255, 255, .22); }
.sv-ssw-glance tr:last-child td { border-bottom: 0; }
}
/* ---- the form ---- */
.sv-ssw-form { margin: 1.5rem 0 0; }
.sv-ssw-field { margin: 0 0 1.4rem; }
.sv-ssw-field label, .sv-ssw-radios legend {
display: block;
font-family: var(--e-global-typography-primary-font-family, brandon-grotesque), sans-serif;
font-size: 12px; font-weight: 900; letter-spacing: 1.1px; line-height: 20px;
text-transform: uppercase;
color: var(--e-global-color-text, #263238);
margin-bottom: .3rem; padding: 0;
}
.sv-ssw-opt { font-weight: 400; color: rgba(38, 50, 56, .65); }
.sv-ssw-hint {
display: block;
font-family: var(--e-global-typography-text-font-family, ff-meta-serif-web-pro), serif;
font-weight: 500; font-size: .95rem; line-height: 1.45;
color: rgba(38, 50, 56, .72);
text-transform: none; letter-spacing: normal;
margin: 0 0 .5rem;
}
.sv-ssw-form input[type=text],
.sv-ssw-form input[type=email],
.sv-ssw-form input[type=tel],
.sv-ssw-form input[type=number],
.sv-ssw-form textarea {
width: 100%; box-sizing: border-box;
background: transparent; border: 0;
border-bottom: 1px solid rgba(38, 50, 56, .55);
border-radius: 0; padding: 10px 0;
font-family: var(--e-global-typography-text-font-family, ff-meta-serif-web-pro), serif;
font-size: var(--e-global-typography-text-font-size, 18px);
color: var(--e-global-color-text, #263238);
}
.sv-ssw-form input:focus, .sv-ssw-form textarea:focus {
outline: 0;
border-bottom-color: var(--e-global-color-primary, #CA4D2A);
border-bottom-width: 2px; padding-bottom: 9px;
}
.sv-ssw-form textarea { resize: vertical; }
@media (min-width: 34rem) {
.sv-ssw-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.5rem; }
}
.sv-ssw-radios { border: 0; margin: 0 0 1.4rem; padding: 0; }
/* ---- the group counts ----
Three narrow number boxes side by side, restored from the original
Google Form on 8 September 2026.
THREE ACROSS AT EVERY WIDTH. They are short enough, and stacking them
would make a person applying alone scroll past three questions they do
not need to answer. The boxes are held narrow so they read as counts
rather than as three more text fields.
Each box is its own .sv-ssw-field so a validation message lands under
the box it belongs to; without that, closest('.sv-ssw-field') finds
the fieldset and reddens all three for one bad answer. Their normal
1.4rem gap is removed here — the grid provides the spacing. */
.sv-ssw-counts {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0 1.25rem; max-width: 26rem;
}
.sv-ssw-counts .sv-ssw-field { margin: 0; }
.sv-ssw-form .sv-ssw-count input[type=number] { max-width: 5.5rem; }
/* A message in a third of 26rem is narrow, so let it wrap tightly
rather than push the boxes out of line. */
.sv-ssw-count .sv-ssw-error { font-size: .85rem; line-height: 1.35; }
@media (max-width: 26rem) { .sv-ssw-counts { gap: 0 .75rem; } }
/* An option's own text reads like body copy, not like a field label, so
it keeps the serif and normal case. `.sv-ssw-field label` would
otherwise catch it. There is no checkbox on this form any more — the
consent tick box and all of its styling went on 8 September 2026 —
so this covers the radio options only. */
.sv-ssw-radio {
display: flex; align-items: flex-start; gap: .6rem;
font-family: var(--e-global-typography-text-font-family, ff-meta-serif-web-pro), serif;
font-size: 1rem; font-weight: 500; line-height: 1.5;
text-transform: none; letter-spacing: normal;
color: var(--e-global-color-text, #263238);
margin: 0 0 .55rem; cursor: pointer;
}
.sv-ssw-field label.sv-ssw-radio, label.sv-ssw-radio {
font-family: var(--e-global-typography-text-font-family, ff-meta-serif-web-pro), serif;
font-size: 1rem; font-weight: 500; line-height: 1.5;
text-transform: none; letter-spacing: normal;
color: var(--e-global-color-text, #263238);
}
.sv-ssw-radio input {
margin-top: .3rem; width: 1.15rem; height: 1.15rem; flex: none;
}
/* ---- what happens to the answers ----
ONE statement, and it now lives BELOW THE SUBMIT BUTTON as ordinary
small print rather than inside the bordered block with the question it
refers to. Same treatment as the other small print on the page — the
serif at .95rem, muted — so it reads as a footnote and not as part of
a question. The privacy policy link stays in it. */
.sv-ssw p.sv-ssw-smallprint, .sv-ssw-smallprint {
font-family: var(--e-global-typography-text-font-family, ff-meta-serif-web-pro), serif;
font-weight: 500;
font-size: .95rem;
line-height: 1.55;
color: rgba(38, 50, 56, .72);
margin: 1.25rem 0 0;
max-width: 42rem;
}
/* The .sv-ssw-arrangements bordered block was REMOVED on 8 September
2026, styles and markup together. It grouped three things — the
step-free access question, the open box and the privacy statement —
and two of the three have since gone, so a purple bar was emphasising
one optional question as if that were intended. */
/* ---- what happens next ----
Above the form, because somebody reads it while deciding whether to
apply, not after they have pressed send. */
.sv-ssw-next-section { margin: 2.5rem 0 0; }
.sv-ssw-next { margin: 0; padding-left: 1.4rem; }
.sv-ssw-next li { margin-bottom: .5rem; }
.sv-ssw-apply { margin-top: 1rem; }
.sv-ssw-submit-row { margin: 1.75rem 0 0; }
/* Room under the button before whatever follows. It sat close to the
footer, which made the end of the form feel like the end of the page
rather than a deliberate stop. */
.sv-ssw-apply { padding-bottom: 4.5rem; }
@media (max-width: 40rem) { .sv-ssw-apply { padding-bottom: 3rem; } }
/* ONE RULE FOR BOTH, so they cannot drift apart.
.sv-ssw-submit is our own form's submit button, which is not
rendered while applications are taken on a Google form.
.sv-ssw-apply-btn is the link that replaced it on 8 September 2026.
The values are the site's own button — the Donate button and the
"day visits" button on the accommodation page. Those carry Elementor
classes whose per-element CSS lives in each page's own inline styles
and was never transplanted here, so the values are restated rather
than inherited. The Elementor classes are on the link as well, for
anything global that hangs off them. */
.sv-ssw-submit,
.sv-ssw .sv-ssw-apply-btn,
a.sv-ssw-apply-btn {
font-family: var(--e-global-typography-primary-font-family, brandon-grotesque), sans-serif;
font-size: 12px; font-weight: 900; letter-spacing: 1.1px; line-height: 20px;
text-transform: uppercase;
color: #fff;
background: var(--e-global-color-primary, #CA4D2A);
border: 2px solid var(--e-global-color-primary, #CA4D2A);
border-radius: 4px; padding: .9rem 1.7rem; cursor: pointer;
}
/* A link is not a button until it stops behaving like text. */
a.sv-ssw-apply-btn {
display: inline-block; text-decoration: none;
}
a.sv-ssw-apply-btn:hover, a.sv-ssw-apply-btn:focus {
color: #fff; text-decoration: none;
}
.sv-ssw-submit[disabled] { opacity: .55; cursor: default; }
/* ---- errors: shown beside the field they belong to, never as a reload ---- */
.sv-ssw-error {
font-family: var(--e-global-typography-primary-font-family, brandon-grotesque), sans-serif;
font-weight: 700; font-size: .95rem;
color: #b3261e; margin: .3rem 0 .4rem;
text-transform: none; letter-spacing: normal;
}
.sv-ssw-field--error input,
.sv-ssw-field--error textarea { border-bottom-color: #b3261e; border-bottom-width: 2px; }
.sv-ssw-summary {
border: 2px solid #b3261e; background: #fdf3f2; border-radius: 4px;
padding: 1rem 1.1rem; margin: 0 0 1.5rem;
}
.sv-ssw-summary p { margin: 0; color: #b3261e; font-weight: 700; }
.sv-ssw-done {
border: 2px solid var(--e-global-color-primary, #CA4D2A);
border-radius: 4px; padding: 1.25rem 1.35rem; margin: 1.5rem 0;
}
.sv-ssw-done h2 { margin-top: 0; border: 0; padding: 0; }
/* ---- the honeypot ----
Off-screen rather than display:none, which some bots skip. */
.sv-ssw-hp {
position: absolute !important; left: -9999px !important;
width: 1px; height: 1px; overflow: hidden;
}
:focus-visible { outline: 3px solid var(--e-global-color-primary, #CA4D2A); outline-offset: 2px; }
/* ═══════════════════════════════════════════════════════════════════
MOBILE SPACING — LAST IN THE FILE ON PURPOSE.
The first attempt put this block near the top, before the
.sv-ssw-purple and .sv-ssw-apply rules it overrides. Equal specificity
plus earlier source order meant the base rules won, and only the part
that had no competitor (.sv-ssw's padding) actually applied: the gap
moved 126px -> 82px instead of the intended 58px, and the second gap
did not move at all. Anything that overrides a rule above must sit
below it.
═══════════════════════════════════════════════════════════════════ */
/* ---- spacing around the purple band on a phone ----
MEASURED AT 375px BEFORE CHANGING ANYTHING. The gap from "A happy few
days, in good company." to the top of the purple band was 126px, and
from the bottom of the band to the "Apply for a place" heading 120px.
Neither is one value — each is three stacking up:
copy -> band 14.4px the last paragraph's own margin
64px .sv-ssw padding-bottom (4rem)
48px .sv-ssw-purple margin-top (3rem)
band -> heading 48px .sv-ssw-purple margin-bottom (3rem)
32px .sv-ssw padding-top (2rem) on the lower block
40px the h2's own margin-top (2.5rem)
The page's own section spacing is the h2's 40px, so that is the target.
Reduced below to 58px and 44px — the h2 keeps its 40px, which is the
standard, and everything else around the band is trimmed. A heading
that is the first thing in its section does not need its inter-section
margin as well, so that one is zeroed.
Desktop is untouched: this is scoped to 40rem and under. */
@media (max-width: 40rem) {
.sv-ssw { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.sv-ssw-purple { margin: 1.5rem 0; }
.sv-ssw-apply { margin-top: 0; }
.sv-ssw-apply > h2:first-child { margin-top: 0; }
}