css/style.css

   1 /**
   2  * If using a CSS pre-processor, tell it to overwrite this file. If not, place
   3  * your custom CSS modifications here.
   4  */
   5
   6 /* Lato font */
   7
   8 @font-face {
   9     font-family: "Lato";
  10          url("../fonts/Lato-Regular.ttf") format('truetype');
  11     font-weight: 400;
  12     font-style: normal;
  13 }
  14
  15 @font-face {
  16     font-family: "Lato";
  17          url('../fonts/Lato-RegularItalic.ttf') format('truetype');
  18     font-weight: 400;
  19     font-style: italic;
  20 }
  21
  22 @font-face {
  23     font-family: "Lato";
  24          url('../fonts/Lato-Bold.ttf') format('truetype');
  25     font-weight: 700;
  26     font-style: normal;
  27 }
  28
  29
  30 /* Universal */
  31
  32 body {
  33   font-family: "Lato", Helvetica, Arial, sans-serif;
  34   margin: 0;
  35   min-width: 320px;
  36 }
  37
  38 a { transition: 0.3s; }
  39
  40 section { position: relative; }
  41
  42 /* etcetera */
  43
  44 .visually-hidden.focusable:focus {
  45     position: absolute !important;
  46     background: #000;
  47     color: #FFF;
  48     padding: 0.5em;
  49     z-index: 9999;
  50 }
  51
  52 .main-container { min-height: 50vh; }
  53
  54 h2.block-title {
  55   background: #000;
  56   color: #FFF;
  57   padding: 0.5em;
  58 }
  59
  60 .feed-icons a {
  61   background: url('../images/rss.svg') top left no-repeat;
  62   background-size: contain;
  63   height: 20px;
  64   overflow: hidden;
  65   display: block;
  66   text-indent: 25px;
  67   font-size: 1em;
  68   width: fit-content;
  69   margin-top: 1em;
  70   float: right;
  71 }
  72
  73 .view-display-id-news_page .feed-icons a {
  74   margin-top: -30px;
  75 }
  76
  77 .more-link {
  78   border: 1px solid #ddd;
  79   border-radius: .5em;
  80   padding: .5em;
  81   text-align: center;
  82   width: 50%;
  83   margin: 0 auto;
  84   font-weight: bold;
  85   margin-top: 2em;
  86 }
  87
  88 .more-link:hover {
  89   background: #EEE;
  90   color: #000;
  91 }
  92
  93 .block-views {
  94   margin-top: 20px;
  95 }
  96
  97 /* Navbar */
  98
  99 .navbar-default {
 100   background: #000;
 101   color: #FFF;
 102   border: none;
 103   border-radius: 0px;
 104   box-sizing: content-box;
 105   align-items: center;
 106   min-height: 100px;
 107 }
 108
 109 .navbar-header,
 110 #navbar-collapse {
 111   max-width: 1150px;
 112   padding: 0;
 113   margin: 0 auto;
 114   border: none;
 115   overflow: hidden;
 116 }
 117
 118 .navbar-default .navbar-toggle { display: none; }
 119
 120 .navbar-header {
 121   position: absolute;
 122   top: 5px;
 123 }
 124
 125 .navbar-brand { display: none; }
 126
 127 #block-ryf-main-menu .navbar-nav { margin-left: 195px; }
 128
 129 .navbar-default .navbar-nav > li > a:focus {
 130   outline: none;
 131 }
 132
 133 .navbar-default .navbar-nav > li > a,
 134 .navbar-default .navbar-nav > li > a:link,
 135 .navbar-default .navbar-nav > li > a:visited {
 136   color: #FFF;
 137   background: #000;
 138   border-bottom: 2px solid transparent;
 139   padding-bottom: 10px;
 140   margin-bottom: 5px;
 141 }
 142
 143 .navbar-default .navbar-nav > li > a:focus,
 144 .navbar-default .navbar-nav > li.active > a:hover,
 145 .navbar-default .navbar-nav > li > a:hover {
 146   color: #DDCC00;
 147   background: #000;
 148   border-bottom: 2px solid #DDCC00;
 149   padding-bottom: 5px;
 150   margin-bottom: 10px;
 151 }
 152
 153 .navbar-default .navbar-nav > li > a.is-active {
 154   border-bottom: 2px solid #FFF;
 155   background: #000;
 156   padding-bottom: 5px;
 157   margin-bottom: 10px;
 158 }
 159
 160 .page-header {
 161   border-bottom: 2px solid #000;
 162   font-size: 2em;
 163 }
 164
 165 .region-header .search-block-form {
 166   width: 300px;
 167   float: right;
 168 }
 169
 170 nav .search-block-form {
 171   position: absolute;
 172   width: 300px;
 173   right: 10%;
 174   top: 30px;
 175 }
 176
 177 /*
 178  *  @media screen and (min-width: 520px) and (max-width: 599px) {
 179  *   .logo img { margin-left: 50px; }
 180  *   #block-ryf-main-menu .navbar-nav { margin-left: 230px; }
 181  * }
 182  *
 183  * @media screen and (min-width: 600px) and (max-width: 767px) {
 184  *   .logo img { margin-left: 100px; }
 185  *   #block-ryf-main-menu .navbar-nav { margin-left: 280px; }
 186  * }
 187  *
 188  * @media screen and (max-width: 767px) {
 189  *   .logo img { height: 150px; margin-top: 25px; }
 190  *   .navbar-default { min-height: 230px; margin-bottom: 30px; }
 191  *   #block-ryf-main-menu .navbar-nav { max-width: 130px; }
 192  * }
 193  *
 194  */
 195
 196 @media screen and (min-width: 768px) {
 197
 198   .navbar-default {
 199      margin-bottom: 100px;
 200   }
 201   .navbar-nav {
 202      margin-top: 40px;
 203   }
 204   .region-header .breadcrumb {
 205     position: absolute;
 206     top: -70px;
 207     left: 200px;
 208     background: none;
 209   }
 210   .region-navigation-collapsible .search-block-form {
 211     float: right;
 212     padding-top: 30px;
 213     width: 210px;
 214   }
 215 }
 216
 217
 218 /* Selectors */
 219
 220
 221 @media screen and (min-width: 768px) {
 222   .form-inline .form-item .select-wrapper {
 223     display: block;
 224   }
 225   .form-inline .form-actions {
 226     margin-top: 21px;
 227   }
 228 }
 229
 230 /* News */
 231
 232 .view-news article {
 233   padding: 0.5em;
 234   margin: 0 10%;
 235 }
 236
 237 .view-news p {
 238   line-height: 1.5em;
 239   font-size: 1.1em;
 240 }
 241
 242 .view-news .node-readmore {
 243   padding: 0.5em 1em;
 244   border: 1px solid #DDD;
 245   border-radius: 0.5em;
 246   float: right;
 247 }
 248
 249 .view-news .node-readmore:hover {
 250   background: #EEE;
 251   color: #000;
 252 }
 253
 254 .view-news footer {
 255   color: #999;
 256   padding: 0.5em;
 257   text-align: right;
 258 }
 259
 260
 261 /* RYF List */
 262
 263
 264 .ryf-list-row {
 265   padding: 0;
 266   margin: 0 auto;
 267   overflow: auto;
 268 }
 269
 270 .ryf-list {
 271   float: left;
 272   margin: 0;
 273   padding: 0.5em;
 274   position: relative;
 275   list-style: none;
 276 }
 277
 278 .ryf-list article {
 279   border: 1px solid #ececec;
 280   border-radius: 5px;
 281   border-top: none;
 282   border-left: none;
 283   padding: 1em;
 284   box-shadow: 2px 2px 5px #ddd;
 285   transition: 0.3s;
 286 }
 287
 288 .ryf-list article:hover {
 289   box-shadow: 0px 0px 5px #aaa;
 290 }
 291
 292 .ryf-list article:before {
 293     content: '';
 294     float: left;
 295     padding-top: 100%;
 296 }
 297
 298 .ryf-list .field--type-image {
 299   width: 150px;
 300   height: 150px;
 301   background: #fff;
 302   border-radius: 10px;
 303   display: flex;
 304   align-items: center;
 305 }
 306
 307 .ryf-list .field--name-field-image {
 308   margin: 0 auto 10px auto;
 309 }
 310
 311 .ryf-list img {
 312   max-width: 150px;
 313   max-height: 150px;
 314   object-fit: contain;
 315   overflow: hidden;
 316 }
 317
 318 .ryf-list img:hover {
 319   border-radius: 0;
 320 }
 321
 322 .ryf-list h2 {
 323   text-align: left;
 324   font-size: 1.5em;
 325   font-weight: 500;
 326   line-height: 1.2em;
 327   margin: 0;
 328   padding: 0;
 329   padding-bottom: 1em;
 330   height: 100px;
 331   overflow: hidden;
 332 }
 333
 334 .ryf-list a {
 335   color: #337AB7;
 336   text-decoration: none;
 337 }
 338
 339 .ryf-list a:hover {
 340   color: #000;
 341 }
 342
 343 .ryf-list .node-readmore,
 344 .ryf-list .tags,
 345 .ryf-list .supplier {
 346   width: 100%;
 347   float: left;
 348   font-size: 0.9em;
 349   border-top: 1px solid #ccc4c4;
 350   margin-top: 5px;
 351   padding-top: 5px;
 352   color: #afadad;
 353 }
 354
 355 .ryf-list .node-readmore {
 356   text-align: right;
 357 }
 358
 359 @media screen and (min-width: 450px) and (max-width: 659px) {
 360   .ryf-list-row {
 361     max-width: 600px;
 362   }
 363   .ryf-list {
 364     max-width: 300px;
 365     float: none;
 366     margin: 0 auto;
 367   }
 368 }
 369 @media screen and (min-width: 660px) and (max-width: 767px) {
 370   .ryf-list-row {
 371     max-width: 600px;
 372   }
 373   .ryf-list-row {
 374     margin: 0 auto;
 375     max-width: 660px;
 376   }
 377   .ryf-list {
 378     max-width: 300px;
 379     float: left;
 380   }
 381   .auto-clear .col-xs-12:nth-child(odd){clear:left;}
 382 }
 383
 384
 385 /* Vendors list */
 386
 387
 388 .vendors-list-row {
 389   padding: 10px;
 390   margin: 0 auto;
 391   overflow: auto;
 392 }
 393
 394 @media screen and (max-width: 767px) {
 395   .vendors-list-row {
 396     margin: 0px auto;
 397   }
 398
 399   .vendors-list {
 400     margin-bottom: 40px;
 401     list-style: none;
 402
 403     overflow: auto;
 404   }
 405
 406   .vendors-list .views-field-field-icon {
 407     width: 220px;
 408
 409     margin: 0px auto 20px auto;
 410   }
 411
 412   .vendors-list .views-field-field-icon img {
 413     margin: 0 auto;
 414   }
 415
 416   .vendors-list .views-field-name,
 417   .vendors-list .views-field-field-description-summary,
 418   .vendors-list .views-field-description__value {
 419     max-width: 300px;
 420     margin: 0 auto 10px auto;
 421   }
 422
 423   .vendors-list .views-field-name {
 424     font-weight: bold;
 425     font-size: 18px;
 426     text-align: center;
 427   }
 428
 429 }
 430
 431 @media screen and (min-width: 768px) {
 432   .vendors-list-row {
 433     width: 600px;
 434     margin: 0px auto;
 435   }
 436
 437   .vendors-list {
 438     list-style: none;
 439     clear: left;
 440
 441     overflow: auto;
 442   }
 443
 444   .vendors-list .views-field-field-icon {
 445     width: 220px;
 446     height: 220px;
 447
 448     margin-bottom: 40px;
 449
 450     float: left;
 451   }
 452
 453   .vendors-list .views-field-field-icon img {
 454     margin: 0 auto;
 455   }
 456
 457   .vendors-list .views-field-name,
 458   .vendors-list .views-field-field-description-summary,
 459   .vendors-list .views-field-description__value {
 460     margin-left: 300px;
 461   }
 462
 463   .vendors-list .views-field-name {
 464     margin-bottom: 10px;
 465     font-weight: bold;
 466     font-size: 18px;
 467   }
 468 }
 469
 470
 471 /* Sidebars */
 472
 473
 474 @media screen and (max-width: 767px) {
 475   .path-products #block-views-block-categories-categories-block { display: none; }
 476 }
 477
 478
 479 /* Vendor and Category taxonomy term pages */
 480
 481
 482 .view-taxonomy-term .view-header .field--name-field-icon img {
 483   margin: 0 auto;
 484 }
 485
 486 .view-filters {
 487   clear: left;
 488 }
 489
 490 .view-taxonomy-term .view-header .field--name-field-vendor-support-link,
 491 .view-taxonomy-term .view-header .field--name-field-vendor-support-email {
 492   margin-top: 15px;
 493 }
 494
 495 @media screen and (max-width: 559px) {
 496   .view-taxonomy-term.view-display-id-taxonomy_term_vendor .view-header {
 497     margin: 0 auto 40px auto;
 498
 499     overflow: auto;
 500   }
 501
 502   .view-taxonomy-term .view-header .field--name-field-icon {
 503     margin: 0 auto 20px auto;
 504     width: 220px;
 505   }
 506
 507   .view-taxonomy-term .view-header .field--name-description,
 508   .view-taxonomy-term .view-header .field--name-field-description-summary,
 509   .view-taxonomy-term .view-header .field--name-field-vendor-support-link,
 510   .view-taxonomy-term .view-header .field--name-field-vendor-support-email {
 511     max-width: 360px;
 512     margin: 15px auto 0 auto;
 513     padding: 0 10px;
 514   }
 515
 516 }
 517
 518 @media screen and (min-width: 560px) {
 519   .view-taxonomy-term.view-display-id-taxonomy_term_vendor .view-header {
 520     margin: 0 0 40px 0;
 521
 522     overflow: auto;
 523   }
 524
 525   .view-taxonomy-term .view-header .field--name-field-icon {
 526     width: 220px;
 527
 528     float: left;
 529   }
 530
 531   .view-taxonomy-term .view-header .field--name-description,
 532   .view-taxonomy-term .view-header .field--name-field-description-summary,
 533   .view-taxonomy-term .view-header .field--name-field-vendor-support-link,
 534   .view-taxonomy-term .view-header .field--name-field-vendor-support-email {
 535     margin-left: 260px;
 536   }
 537
 538 }
 539
 540 @media screen and (min-width: 768px) {
 541   .view-taxonomy-term .view-header {
 542     max-width: 700px;
 543   }
 544 }
 545
 546
 547 /* Product */
 548
 549
 550 @media screen and (max-width: 767px) {
 551   .page-node-type-product .product {
 552     max-width: 382px;
 553     margin: 0 auto;
 554   }
 555 }
 556
 557 @media screen and (min-width: 768px) and (max-width: 991px) {
 558   .page-node-type-product .product {
 559     width: 700px;
 560     margin: 0 auto;
 561   }
 562 }
 563
 564 @media screen and (min-width: 992px) {
 565   .page-node-type-product .product {
 566     width: 800px;
 567     margin: 0 auto;
 568   }
 569 }
 570
 571 .page-node-type-product .product .field--name-field-image {
 572   padding: 10px;
 573
 574   border: 1px solid #888;
 575   border-radius: 10px;
 576 }
 577
 578 .page-node-type-product .product .field--name-field-image img {
 579   margin: 0 auto;
 580 }
 581
 582 .page-node-type-product .product .field--name-field-extra-images {
 583   padding: 5px;
 584
 585   display: flex;
 586   align-items: center;
 587
 588   border: 1px solid #888;
 589   border-radius: 10px;
 590 }
 591
 592 .page-node-type-product .product .field--name-field-extra-images .field--item {
 593   display: inline-block;
 594   margin: auto;
 595   padding: 5px;
 596 }
 597
 598 .page-node-type-product .product .field--name-field-categories,
 599 .page-node-type-product .product .field--name-field-vendor {
 600   margin: 10px 10px 20px 0px;
 601   padding: 10px;
 602   border: 1px solid #888;
 603   border-radius: 10px;
 604 }
 605
 606 .page-node-type-product .product .field--name-field-categories .field--item {
 607   display: list-item;
 608   list-style: circle;
 609   margin-left: 15px;
 610 }
 611
 612 #block-views-block-categories-categories-block ul {
 613   margin: 0; padding: 0 10px;
 614   list-style: none;
 615 }
 616
 617 #block-views-block-categories-categories-block li {
 618   padding: 5px 10px;
 619   border: 1px solid #DDD;
 620   border-radius: 5px;
 621   list-style: none;
 622   margin: 5px 0;
 623 }
 624
 625 #block-views-block-categories-categories-block li:hover {
 626   background: #EEE;
 627   color: #000;
 628 }
 629
 630 #block-views-block-categories-categories-block a {
 631   width: 100%;
 632   display: block;
 633 }
 634
 635 /* product page colors */
 636 .page-node-type-product .product .field--name-field-image {
 637   background-color: #fff;
 638   border-color: #aaa;
 639 }
 640 .page-node-type-product .product .field--name-field-extra-images {
 641   background-color: #f3f3f3;
 642   border-color: #aaa;
 643 }
 644 .page-node-type-product .product .field--name-field-categories {
 645   background-color: #def;
 646   border-color: #8ad;
 647 }
 648 .page-node-type-product .product .field--name-field-vendor {
 649   background-color: #dfe;
 650   border-color: #8da;
 651 }
 652
 653 @media screen and (max-width: 767px) {
 654   .page-node-type-product .product .field--name-field-extra-images {
 655     margin: 10px auto 0px auto;
 656   }
 657
 658   .page-node-type-product .product .field--name-body,
 659   .page-node-type-product .product .field--name-field-vendor-product-link,
 660   .page-node-type-product .product .field--name-field-certification-details,
 661   .page-node-type-product .product .field--name-field-certification-date,
 662   .page-node-type-product .product .field--name-field-source-code-links {
 663     margin-bottom: 20px;
 664   }
 665
 666   .page-node-type-product .product .field--name-field-categories,
 667   .page-node-type-product .product .field--name-field-vendor {
 668     margin-bottom: 0px;
 669     float: left;
 670   }
 671
 672   .page-node-type-product .product .field--name-body {
 673     padding-top: 20px;
 674     clear: both;
 675   }
 676 }
 677
 678
 679 @media screen and (min-width: 768px) {
 680   .page-node-type-product .product .field--name-field-image {
 681     width: 382px;
 682     float: left;
 683   }
 684
 685   .page-node-type-product .product .field--name-field-extra-images {
 686     float: left;
 687     clear: left;
 688
 689     width: 382px;
 690     margin-top: 10px;
 691   }
 692
 693   .page-node-type-product .product .field--name-body,
 694   .page-node-type-product .product .field--name-field-vendor-product-link,
 695   .page-node-type-product .product .field--name-field-certification-details,
 696   .page-node-type-product .product .field--name-field-certification-date,
 697   .page-node-type-product .product .field--name-field-source-code-links {
 698     margin-left: 400px;
 699     margin-bottom: 20px;
 700   }
 701
 702   .page-node-type-product .product .field--name-field-categories {
 703     float: left;
 704     clear: left;
 705   }
 706
 707   .page-node-type-product .product .field--name-field-vendor {
 708     float: left;
 709   }
 710
 711 }
 712
 713
 714 /* News and Product Announcements */
 715
 716
 717 .page-node-type-product-announcement .page-header,
 718 .page-node-type-product-announcement .tabs--primary,
 719 .page-node-type-product-announcement .region-content,
 720 .page-node-type-general-news-item .page-header,
 721 .page-node-type-general-news-item .tabs--primary,
 722 .page-node-type-general-news-item .region-content,
 723 .page-node-type-page .page-header,
 724 .page-node-type-page .tabs--primary,
 725 .page-node-type-page .region-content,
 726 .path-news .page-header,
 727 .path-news .tabs--primary,
 728 .path-news .region-content {
 729   max-width: 800px;
 730   margin: 0 auto;
 731 }
 732
 733 /* don't apply above max-width rule to main page */
 734 .path-frontpage .page-header,
 735 .path-frontpage .tabs--primary,
 736 .path-frontpage .region-content {
 737   max-width: 2000px; /* high number beyond the max */
 738 }
 739
 740 .page-node-type-page .page-header {
 741   margin-bottom: 20px;
 742 }
 743
 744 .path-news h2,
 745 .block-views-blocknews-news-block article h2 {
 746   font-size: 25px;
 747 }
 748
 749 .page-node-type-product-announcement .author,
 750 .page-node-type-general-news-item .author {
 751   margin: 10px 0 20px 0;
 752   font-style: oblique;
 753 }
 754
 755 .page-node-type-product-announcement .field--name-body,
 756 .page-node-type-general-news-item .field--name-body {
 757   margin-bottom: 20px;
 758 }
 759
 760 .page-node-type-product-announcement .field--name-field-external-news-link,
 761 .page-node-type-general-news-item .field--name-field-external-news-link {
 762   margin-bottom: 20px;
 763 }
 764
 765 .page-node-type-product-announcement .field--name-field-vendor-page,
 766 .page-node-type-product-announcement .field--name-field-announced-products {
 767   margin-bottom: 20px;
 768 }
 769
 770
 771 /* Search Results */
 772
 773
 774 @media screen and (max-width: 600px) {
 775   .path-search .region-content > ol {
 776     width: 300px;
 777   }
 778 }
 779 @media screen and (min-width: 601px) and (max-width 1000px) {
 780   .path-search .region-content > ol {
 781     width: 560px;
 782   }
 783 }
 784 @media screen and (min-width: 1001px) {
 785   .path-search .region-content > ol {
 786     width: 900px;
 787   }
 788 }
 789
 790 .path-search .region-content > ol {
 791   margin: 0 auto;
 792   padding-left: 0;
 793   overflow: auto;
 794 }
 795
 796 .path-search .region-content > ol li {
 797   width: 280px;
 798   height: 280px;
 799   margin: 0px auto;
 800   padding: 10px;
 801
 802   float: left;
 803
 804   list-style: none;
 805   overflow: hidden;
 806 }
 807
 808 .path-search .region-content > ol li h3 {
 809   text-align: center;
 810 }
 811
 812 .path-search .region-content > ol li .search-image {
 813   width: 100px;
 814   height: 100px;
 815
 816   margin: 0 auto;
 817
 818   display: flex;
 819   align-items: center;
 820 }
 821
 822 .path-search .region-content > ol li img {
 823 }
 824
 825
 826 /* Footer */
 827
 828 .footer {
 829   background: #333;
 830   color: #FFF;
 831 }
 832
 833 /* full page width for footer */
 834 .footer {
 835   width: 100%;
 836 }
 837
 838 .footer a { color: #DDCC00; }
 839
 840 .footer a:hover { color: #FFF; }
 841
 842 .footer h4 { font-weight: bold; }
 843
 844 .footer .copyright { font-size: 0.9em; text-align: center; width: 80%; margin-top: 1em; border-top: 1px solid #111; padding: 1em; }
 845
 846 #fsf-logo-footer { margin-bottom: 10px; }
 847
 848 @media print { #fsf-logo-footer { filter: invert(100%) } }
 849