/* Palette sampled from the DevOpsDays Barcelona logo:
navy #111224 · cyan #00BAEB · amber #F9CD34 · crimson #F11647 · cream #FFFCF0 */
/* Masthead: navy instead of the theme default blue-to-grey, so white text
stays legible all the way down to the venue address. */
/* Full-bleed masthead. It is itself the .col-md-12, so Bootstrap's
flex: 0 0 100% / max-width: 100% has to be overridden or the width is
clamped to the container.
The blue is a lighter, logo-derived teal rather than near-black navy, but
it still has to carry white text: it runs from #12789A at the top (5.1:1
against white) to #0A5771 at the bottom (7.8:1), deepening as it goes so
the small venue and date text sits on the strongest contrast.
--bcn-inset aligns the masthead text with the body copy below it. That
copy sits in .bcn-wrap, a 1000px column centred in the viewport, so the
inset is the distance from the screen edge to that column: 50vw - 500px.
Below roughly 1030px the column is no longer 1000px wide and hugs the
container padding instead, which is what the 15px floor picks up. */
.welcome-page-masthead {
--bcn-inset: max(15px, calc(50vw - 500px));
flex: 0 0 100vw;
width: 100vw;
max-width: none;
margin-top: 0;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
padding-left: var(--bcn-inset);
padding-right: var(--bcn-inset);
border-bottom: 4px solid #F9CD34;
font-size: +1em;
background: #12789A;
background: linear-gradient(#12789A, #0A5771);
}
/* 100vw does not account for the scrollbar; stop the overhang from creating
a horizontal scroll. Safe here - the theme has no sticky or fixed
positioning for this to break. */
body {
overflow-x: hidden;
}
.welcome-page-masthead,
.welcome-page-masthead a {
color: #fff;
}
.welcome-page-date {
font-weight: 700;
}
/* Bigger title, now that the masthead carries only the name and the dates.
text-transform: none undoes the theme's generic h1 capitalize rule, which
was rendering the wordmark as "Devopsdays". Lowercase is how devopsdays
sets its own name, here and in the site nav and footer. */
.welcome-page-masthead h1.welcome-page {
font-size: clamp(2.6rem, 5vw, 3.8rem);
line-height: 1.1;
margin-bottom: 0.4rem;
text-transform: none;
}
/* Drop the venue and the address from the masthead - both still appear in
the Location row below. The fields stay in main.yml because the location
page's map, the Location row and the schema.org event metadata all read
them, so this has to be done here rather than by blanking the config.
The two
that follow them go too, or they leave the gap behind. */
.welcome-page-masthead-venue,
.welcome-page-masthead-venue + br,
.welcome-page-masthead-venue + br + span,
.welcome-page-masthead-venue + br + span + br {
display: none;
}
.e-summary {
font-size: +1em;
font-weight: 700;
}
/* Hide the "share this page" row. Its email icon shares the page by mail,
which reads as a second Contact button, and its LinkedIn icon posts to the
visitor's own feed rather than linking to ours. Both jobs are done more
clearly by the Contact button and the Follow badge below.
Note: social_shares: [] would not work here - an empty list is falsy in
Hugo, so footer_scripts.html falls back to showing all four buttons. */
#share {
display: none;
}
/* Masthead buttons: outlined rather than filled, so they sit quietly on the
navy instead of competing with it. */
a.event-cta-button {
background-color: transparent;
border: 1px solid rgba(255, 255, 255, 0.65);
color: #fff;
}
a:hover.event-cta-button {
background-color: rgba(255, 255, 255, 0.15);
color: #fff;
}
.content-text {
width: 100%;
margin: 0 auto;
}
div.sponsor-row img.img-fluid {
max-height: 70px;
}
/* The theme sets html { font-size: 14px }, so a bare rem here is 14px and
body copy renders small and light. Lift the whole column to ~16px with a
roomier line height. */
.bcn-wrap {
max-width: 1000px;
margin: 0 auto;
font-size: 1.15rem;
line-height: 1.65;
}
/* Follow line, sits directly under the masthead */
.bcn-follow {
display: flex;
align-items: center;
gap: 0.6rem;
margin: 1.25rem 0 1.5rem;
font-weight: 600;
color: #111224;
}
.bcn-follow a.social-li {
font-size: 1.6rem;
color: #111224;
text-decoration: none;
}
.bcn-follow a.social-li:hover {
color: #00BAEB;
}
/* Dates / Location / Contact */
.bcn-facts {
border-left: 4px solid #00BAEB;
padding-left: 1.25rem;
margin-bottom: 2rem;
}
.bcn-facts .row {
margin-bottom: 0.35rem;
}
/* Top section: the logo sits beside everything from the LinkedIn line down
to the end of the intro copy, centred against that whole block rather
than against the first paragraph. Stacks on mobile. */
.bcn-top {
display: flex;
flex-wrap: wrap;
gap: 2rem;
align-items: center;
margin: 1.5rem 0 2.5rem;
}
.bcn-top-main {
flex: 1 1 340px;
min-width: 0;
}
.bcn-top-logo {
flex: 0 1 260px;
text-align: center;
margin: 0 auto;
}
.bcn-top-logo img {
max-width: 100%;
height: auto;
}
.bcn-top-main h2 {
margin-top: 0;
}
/* "What's in Store?" cards. Deliberately plain - cream fill, one hairline
border, navy titles. They describe the event rather than asking for
anything, and the logo colours are spent on the action strip above. */
.bcn-card-grid {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin: 1.5rem 0 2.5rem;
}
.bcn-card {
flex: 1 1 220px;
border: 1px solid #e6e6ea;
border-radius: 6px;
padding: 1.25rem 1.5rem;
background: #FFFCF0;
color: #1a1a1a;
}
.bcn-card h3 {
margin-top: 0;
margin-bottom: 0.75rem;
font-size: 1.35rem;
font-weight: 700;
color: #111224;
}
.bcn-card p {
margin-bottom: 0;
font-size: 1.1rem;
line-height: 1.6;
}
/* The three things that are live now: program, speakers and tickets. A
strip of linked cards rather than three more lines in the facts box -
these are what we want a visitor to act on, not more small print. The
whole card is the link; the arrow is decoration. This is the only place
on the page carrying the three logo colours - the "What's in Store?"
cards below stay plain, so the two grids do not read as the same kind of
thing and the eye lands here first. */
.bcn-actions {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin: 1.5rem 0 2.5rem;
}
.bcn-action {
flex: 1 1 240px;
display: block;
border: 1px solid #e6e6ea;
border-left: 4px solid #00BAEB;
border-radius: 6px;
padding: 1.1rem 1.35rem;
background: #fff;
color: #1a1a1a !important;
text-decoration: none !important;
transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.bcn-action:hover {
box-shadow: 0 4px 14px rgba(17, 18, 36, 0.12);
transform: translateY(-2px);
}
/* The theme clears the outline on :focus, so a keyboard user has no way of
telling which card or button they are on. Put one back, in the darker end
of the masthead teal so it reads against both the white cards and the
cream call to action. */
.bcn-action:focus-visible,
.bcn-btn:focus-visible {
outline: 3px solid #0A5771;
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
.bcn-action {
transition: none;
}
.bcn-action:hover {
transform: none;
}
}
.bcn-action-title {
display: block;
font-size: 1.35rem;
font-weight: 700;
margin-bottom: 0.3rem;
color: #076A85;
}
.bcn-action p {
margin: 0;
font-size: 1.05rem;
line-height: 1.55;
}
.bcn-action-go {
display: block;
margin-top: 0.6rem;
font-weight: 600;
color: #076A85;
}
.bcn-action.amber { border-left-color: #F9CD34; }
.bcn-action.amber .bcn-action-title,
.bcn-action.amber .bcn-action-go { color: #A34E12; }
.bcn-action.crimson { border-left-color: #F11647; }
.bcn-action.crimson .bcn-action-title,
.bcn-action.crimson .bcn-action-go { color: #C00E38; }
/* Bottom call to action */
.bcn-cta {
background: #FFFCF0;
border: 1px solid #e6e6ea;
border-top: 4px solid #F11647;
border-radius: 8px;
padding: 1.75rem 2rem;
margin: 2rem 0;
text-align: center;
color: #1a1a1a;
}
.bcn-btn {
display: inline-block;
background: #D8123F;
color: #fff !important;
padding: 0.65rem 1.75rem;
border-radius: 5px;
font-weight: 600;
text-decoration: none;
margin: 0.4rem;
}
.bcn-btn:hover {
background: #B00E34;
color: #fff !important;
}
.bcn-btn.outline {
background: transparent;
border: 2px solid #111224;
color: #111224 !important;
}
.bcn-btn.outline:hover {
background: #111224;
color: #fff !important;
}
/* ---------------------------------------------------------------------------
Shared across the event's pages
Everything above is the welcome page. Everything below is used by welcome,
sponsor, conduct and location alike, so that the four read as one site
rather than four one-off stylesheets.
--------------------------------------------------------------------------- */
/* Every heading on the page gets the same air under it. The card grids carry
their own 1.5rem top margin, which collapses against this to the same gap,
so a heading followed by prose and a heading followed by cards match. */
.bcn-wrap h2 {
margin-bottom: 1.5rem;
}
/* On every page but welcome the theme prints its own above our column,
full container width. Pull it onto the same 1000px measure so the title
lines up with the text underneath it instead of starting further left. */
.content-text > h1:not(.welcome-page) {
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}
/* The opening statement of a page, on the same cyan rule as the facts block
on the welcome page. */
.bcn-lead {
border-left: 4px solid #00BAEB;
padding-left: 1.25rem;
margin: 0 0 2rem;
font-size: 1.2rem;
line-height: 1.6;
color: #1a1a1a;
}
/* A full-width relative of .bcn-card, for a block of prose or a list that
needs to sit apart from the run of the page. */
.bcn-panel {
border: 1px solid #e6e6ea;
border-radius: 6px;
padding: 1.25rem 1.5rem;
margin: 1.5rem 0;
background: #FFFCF0;
color: #1a1a1a;
}
.bcn-panel > :first-child {
margin-top: 0;
}
.bcn-panel > :last-child {
margin-bottom: 0;
}
.bcn-panel h3 {
margin-top: 0;
margin-bottom: 0.75rem;
font-size: 1.35rem;
font-weight: 700;
color: #111224;
}
.bcn-panel ul {
margin-bottom: 0;
padding-left: 1.2rem;
}
/* The one panel that has to be found in a hurry: how to report a code of
conduct problem. White rather than cream so it lifts off the page, and the
only crimson on it, because it is the only alarm on the site. */
.bcn-panel.alert {
background: #fff;
border-left: 4px solid #F11647;
}
.bcn-panel.alert h3 {
color: #C00E38;
}
/* Attendance figures on the sponsor page. Two numbers is not a chart, so
these are stat tiles - and the number wears ink rather than sitting on a
filled block, so it reads as a fact rather than as a badge. */
.bcn-stats {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin: 1.5rem 0 2.5rem;
}
.bcn-stat {
/* Do not grow. Two tiles stretched across a 1000px column leave most of
each one empty; sized to their content they read as a pair of facts. */
flex: 0 1 260px;
border: 1px solid #e6e6ea;
border-left: 4px solid #00BAEB;
border-radius: 6px;
padding: 1.1rem 1.35rem;
background: #fff;
}
.bcn-stat-number {
display: block;
font-size: 2.4rem;
line-height: 1.1;
font-weight: 700;
color: #111224;
}
.bcn-stat-label {
display: block;
margin-top: 0.35rem;
font-size: 1rem;
line-height: 1.4;
color: #55555f;
}
/* The embedded map is a fixed-size iframe from the shortcode. Let it fill the
column instead. */
.bcn-map {
margin: 1.5rem 0 2rem;
}
.bcn-map iframe {
width: 100%;
max-width: 100%;
height: 380px;
border: 1px solid #e6e6ea;
border-radius: 6px;
}
/* Section break, in place of the markdown --- the code of conduct used. */
.bcn-rule {
border: 0;
border-top: 1px solid #e6e6ea;
margin: 2.5rem 0;
}
/* The organizer cards come from the theme's list_organizers shortcode, so the
markup is not ours to change - only the surface it lands on. Bootstrap's
card chrome comes off and the pieces are re-ranked: the person's name is the
loudest thing on the card, not the word "Organizer". */
.bcn-wrap .organizer-card {
margin-bottom: 1.5rem;
}
/* The shortcode asks for four across on a wide screen (col-xl-3). Inside our
1000px column that is about 220px a card, which is too narrow for a bio -
every third or fourth word wraps. Three across gives each card about 300px
without widening the measure the rest of the site is set to. Below 1200px
the shortcode's own col-lg-4 and col-md-6 already step down to three and
two, so only the xl case needs saying. */
@media (min-width: 1200px) {
.bcn-wrap .organizer-card {
flex: 0 0 33.3333%;
max-width: 33.3333%;
}
}
.bcn-wrap .organizer-card .card {
display: flex;
flex-direction: column;
height: 100%;
border: 1px solid #e6e6ea;
border-radius: 6px;
overflow: hidden;
background: #fff;
}
/* order: the shortcode prints the name before the portrait, so a two-line
name pushed that card's photo below its neighbours'. The card is a flex
column, so the photo is pulled to the top without touching the markup and
the photos line up across a row whatever the names do. */
.bcn-wrap .organizer-card .card-header {
order: 2;
padding: 1rem 1rem 0.65rem;
background: transparent;
border-bottom: 0;
}
.bcn-wrap .organizer-card .card-header h3 {
margin: 0;
font-size: 1.15rem;
font-weight: 700;
line-height: 1.3;
color: #111224;
}
/* The role is set as an h4, which had it outshouting the name it belongs to.
It is a label, so it is sized and spaced like one. */
.bcn-wrap .organizer-card .card-header h4 {
margin: 0.3rem 0 0;
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #55555f;
}
/* Portraits arrive at whatever aspect ratio each person sent. Crop them all to
the same square so the grid does not stagger. */
.bcn-wrap .organizer-card .organizer-image {
order: 1;
width: 100%;
/* The theme pins img.organizer-image to height: 300px, which both ignores
the aspect ratio below and leaves a different amount of each person
showing. Hand the height back to the ratio. */
height: auto;
aspect-ratio: 1 / 1;
object-fit: cover;
}
.bcn-wrap .organizer-card .card-block {
order: 3;
padding: 1rem;
}
/* Bootstrap's .text-muted is too light to read at this size. */
.bcn-wrap .organizer-card .card-subtitle {
font-size: 0.9rem;
font-weight: 600;
/* The shortcode tags the employer with Bootstrap's .text-muted, which is
an !important utility - #6c757d is too light to read at this size. */
color: #55555f !important;
}
.bcn-wrap .organizer-card .card-text {
font-size: 1rem;
line-height: 1.55;
color: #1a1a1a;
}
/* fa-2x put the social icons above the bio in the visual order. Bring them
down to the text's weight and give them the page's ink. */
.bcn-wrap .organizer-card .card-block .fa-2x {
font-size: 1.4rem;
}
.bcn-wrap .organizer-card .card-block a {
color: #111224;
}
.bcn-wrap .organizer-card .card-block a:hover {
color: #00BAEB;
}
.bcn-wrap .organizer-card .card-block a:focus-visible {
outline: 3px solid #0A5771;
outline-offset: 3px;
}
/* The address is the point of the contact page, so it is the biggest thing in
the block that carries it. */
.bcn-email {
margin: 0.4rem 0 0;
font-size: 1.35rem;
font-weight: 700;
}
.bcn-email a {
color: #C00E38;
}
.bcn-email a:hover {
color: #8F0A2A;
}